从单个 JSON 数据容器在 Highchart 中绘制多个系列答案

【问题标题】：Draw multiple series in Highchart from single JSON data container从单个 JSON 数据容器在 Highchart 中绘制多个系列
【发布时间】：2020-01-10 23:11:08
【问题描述】：

我试图从 JSON 文件中在 Highchart 中绘制 2 行我一直在阅读有类似问题的线程，但无济于事，所以现在我发布我的问题。我的 JSON 文件如下所示

[[ 1578258092000, 109, 32 ], [ 1578258812000, 120, 34 ], [ 1578260104000, 123, 35 ],

我尝试使用下面的代码来指导 Highchart

Highcharts.getJSON(
    'temps.json',
    function (data) {

        Highcharts.chart('container', {
            chart: {zoomType: 'x'},
            title: {text: 'Values over time'},
            subtitle: {text: document.ontouchstart === undefined ? 'Pinch the chart to zoom in' : 'Pinch the chart to zoom in'},
            xAxis: {type: 'datetime'},
            yAxis: {title: {text: 'Value'}},
            legend: {enabled: false},
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 0
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },

            series: [{
                name: 'Value1',
                data: data.arr1
				},{
                name: 'Value2',
                data: data.arr2	
				}]
        });
    }
);

我不知道如何将 JSON 文件中的数据拆分为 2 个系列。谁能举个例子？

【问题讨论】：

标签： javascript json highcharts

【解决方案1】：

在你的数据将在图表中初始化之前，你可以做一些解析数据操作来创建两个不同的数组，例如：

var data =[[ 1578258092000, 109, 32 ], [ 1578258812000, 120, 34 ], [ 1578260104000, 123, 35 ]];

var data1 = data.map(d => [d[0], d[1]]),
    data2 = data.map(d => [d[0], d[2]]);

演示：https://jsfiddle.net/BlackLabel/1Lsgcy7h/

【讨论】：