Библиотека JS Charts

Question

Я должен реализовать график, который имеет много элементов для отслеживания. Я знаю, что есть много библиотек, и сейчас я использую старшие графики. Проблема в том, что я прохожу 12 вех за горизонтальную линию, но прохожу только 3 значения. Желаемое поведение - нарисовать все вехи и провести черту только для тех, для кого я передал значение. На данный момент он показывает только вехи, для которых я передал значение.

Вот пример:...

    xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

...

    series: [{
        name: 'Tokyo',
        marker: {
            symbol: 'square'
        },
        data: [7.0, 6.9, 9.5, 14.5, 13.9, 9.6]

    },

При предоставлении меньшего количества данных, чем количество элементов xAxis, не все элементы xAxis отображаются на диаграмме. Я хочу, чтобы все они отображались на графике, а линия корзины отображалась только для тех элементов xAxis, для которых у него есть данные.

Знаете ли вы, как я могу сделать это с высокими чартами, или вы знаете библиотеку, которая может сделать эту работу. Спасибо за время.

С уважением, Герги.

Answer 1

Если я вас правильно понял, вы хотите, чтобы отображались все категории, а их линии отображались по мере того, как вы предоставляете их данные. Это легко сделать в старших графиках, если вы передадите значение 'null' для всех этапов, для которых вы не хотите рисовать линию! массив будет иметь 12 значений, но если у вас есть только три значения, то первые три будут этими значениями, а остальные будут нулевыми, также вы можете сопоставить их с категориями, например, дать значения в номере категории массива!

series: [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, null, null, null, null, null, null, null, null, null]

        }]

Позже вы можете обновить серию, продолжая получать значения через

chart.series[0].update: [{
                name: 'Tokyo',
                data: [49.9, 71.5, 106.4, 75, null, null, null, null, null, null, null, null]

            }]

Смотрите рабочую скрипку здесь