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

问题描述 投票:0回答:1

我试图从JSON文件在Highchart中绘制2条线我一直在阅读有类似问题的帖子,但无济于事,所以现在我发布我的问题。我的JSON文件看起来像这样

[1578258092000,109,32],[1578258812000,12034],[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个回答
0
投票

在将数据初始化到图表之前,您可以执行一些解析数据操作以创建两个不同的数组,例如:

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/

© www.soinside.com 2019 - 2024. All rights reserved.