используя несколько столбцов данных для построения диаграммы, а некоторые - для отображения в верхних диаграммах всплывающей подсказки

Question

Я хочу построить линейный график, используя столбцы «дата», «значение1», «значение2» и «значение3». Я не хочу включать темы 1, темы 2 и темы 3 в свой график во время построения графика, но когда я нажимаю на линию, должна появиться соответствующая тема. Вот моя таблица данных Мой формат данных Это пример файла данных, в нем тысячи таких строк, и это внешний файл CSV.

Есть предложения, как это сделать? Спасибо

Answer 1

Самое простое решение - использовать опцию seriesMapping и создать собственное свойство для каждой точки - например, topic. Затем вы сможете использовать ссылку на это свойство во всплывающей подсказке:

data: {
    ...,
    seriesMapping: [{
        x: 0,
        y: 1,
        topic: 2
    }, {
        x: 0,
        y: 3,
        topic: 4
    }, {
        x: 0,
        y: 5,
        topic: 6
    }]
},
tooltip: {
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b> topic: <b>{point.topic}</b><br/>'
}

API Reference: https://api.highcharts.com/highcharts/data.seriesMapping

Демонстрационная версия: https://jsfiddle.net/BlackLabel/56kqb2nv/

Answer 2

Я бы перешел на https://www.highcharts.com/demo/line-basic. Я бы тогда взял пример решения в качестве jsfiddle (кнопка внизу) и изменил пример данных. Я буду тестировать и модифицировать его, пока у меня будет правильное решение.

Приведенное выше решение дает вам пример линейного набора данных, поэтому у вас есть точка данных для каждой даты. Поэтому была указана только начальная дата: 2010. Это может быть трудно для вас реализовать, потому что вы знаете даты только после прочтения CSV.

Поэтому я изменил приведенный выше код, и теперь вы можете добавлять в него нелинейные данные. Смотри https://jsfiddle.net/b5kw308c/.

Я добавил:

xAxis: {
    type: 'datetime'
},

И блоки данных теперь другие:

    data: [
        [Date.UTC(2010, 1, 1), 29.9],
        [Date.UTC(2010, 1, 2), 30.5],
        [Date.UTC(2010, 1, 3), 34.4],
        [Date.UTC(2010, 2, 6), 40.2],
        [Date.UTC(2010, 2, 7), 46.0],
        [Date.UTC(2011, 1, 8), 60.0]
    ]

Для csv: вам понадобится небольшой javascript, который читает csv и создает массивы для столбцов. Они должны точно соответствовать тем, которые нужны старшим чартам, см. «Серии» в этих примерах.