从JSON文件创建具有多个系列的Highchart [英] Creating a Highchart with multiple series from a JSON file
问题描述
我正在尝试从服务器上的JSON文件创建高位图导入数据. JSON文件的格式如下:
I am trying to create a highchart importing data from a JSON file I have on the server. The JSON file is formatted as follows:
[
[1583595673000,21.3,45.0,12.7,66.0,11.4,6.5,0.0,1005.8,7222,1],
[1583595973000,21.3,45.0,12.6,67.0,11.6,6.6,0.0,1005.7,6145,1],
[1583596273000,21.3,45.0,12.6,68.0,11.4,6.8,0.0,1005.7,6211,1],
[1583596573000,21.2,44.0,12.5,68.0,11.3,6.8,0.0,1005.6,6418,1],
[1583596873000,21.2,44.0,12.5,68.0,10.6,6.8,0.0,1005.6,5055,1],
[1583597173000,21.2,45.0,12.4,68.0,11.1,6.7,0.0,1005.5,8063,1],
[1583597473000,21.2,45.0,12.4,68.0,11.4,6.7,0.0,1005.5,5779,1],
[1583597773000,21.2,45.0,12.4,68.0,10.9,6.7,0.0,1005.5,3800,1],
[1583598073000,21.2,45.0,12.3,68.0,10.8,6.6,0.0,1005.5,3250,1],
[1583598373000,21.1,45.0,12.2,68.0,10.2,6.5,0.0,1005.2,2573,1],
[1583598673000,21.1,45.0,12.2,68.0,11.2,6.5,0.0,1005.5,2512,1],
[1583598973000,21.1,45.0,12.1,67.0,10.0,6.2,0.0,1005.2,2710,1],
[1583599273000,21.1,46.0,12.1,66.0,10.5,5.9,0.0,1005.4,2338,1],
[1583599573000,21.2,46.0,12.1,65.0,10.6,5.7,0.0,1005.2,2320,1],
[1583599873000,21.2,46.0,12.2,64.0,10.0,5.6,0.0,1005.2,2606,1],
[1583600173000,21.2,47.0,12.2,64.0,10.2,5.6,0.0,1005.3,3142,1],
[1583600473000,21.3,49.0,12.2,64.0,10.0,5.6,0.0,1005.1,2916,1],
[1583600773000,21.4,49.0,12.2,63.0,10.2,5.4,0.0,1005.1,2663,1],
[1583601073000,21.5,50.0,12.2,63.0,10.4,5.4,0.0,1005.2,2089,0],
[1583601373000,21.5,52.0,12.2,63.0,9.5,5.4,0.0,1005.1,2334,0]
]
每行都包含日期戳，后跟所有不同的数据值
Each line contains the datestamp followed by all the different data values
我的图表代码如下:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<div id="chart1_container" style="height: 600px"></div>
</head>
<body>
<script type="text/javascript">
var chart1;
$(document).ready(function() {
chart1 = new Highcharts.chart({
chart: {
renderTo: 'chart1_container',
type: 'line',
marginLeft: 87,
zoomType: 'x',
events: {
load: getChart1data
},
title: {
text: 'TEST',
},
},
xAxis: {
//today
type: 'datetime',
labels: {
format: '{value:%b %e}'
},
},
yAxis: {
labels: {
format: '{value} In'
},
},
series: [{
name: 'First Series',
data: [],
},{
name: 'Second Series',
data: [],
},{
name: 'Third Series',
data: [],
},{
name: 'Fouth Series',
data: [],
}],
plotOptions: {
line: {
lineWidth: 1,
states: {
hover: {
lineWidth: 2
}
},
marker: {
enabled: false
},
},
},
credits: {
enabled: false
},
});
});
function getChart1data()
{
$.ajax({
url: 'data/7days_highchart.json',
datatype: "json",
success: function(data)
{
console.log(data);
chart1.series[0].setData(data);
chart1.series[1].setData(data);
chart1.series[2].setData(data);
chart1.series[3].setData(data);
},
});
}
</script>
</body>
</html>
这会产生一个图，但是所有四个系列都是相同的，我该如何修改代码，以便每个系列都引用不同的数据集?
This produces a graph but all four series are identical, how do I adapt the code so that each series refers to a different dataset?
我创建了一个jsfiddle https://jsfiddle.net/ashenshugar/vw5a2431/但这不起作用，因为我无法模拟外部JSON文件...
I've created a jsfiddle https://jsfiddle.net/ashenshugar/vw5a2431/ but it doesn't work as I can't emulate the external JSON file...
谢谢
推荐答案
我更新了上述解决方案的代码，因为我不一定要显示连续条目中的数据.
I updated the code for the solution above as I do not necessarily want to display data from consecutive entries.
function getChart1data()
{
$.ajax({
url: 'data/7days_highchart.json',
datatype: "json",
success: function(data)
{
console.log(data);
chart1.series[0].setData(data.map(el => [el[0], el[1]]));
chart1.series[1].setData(data.map(el => [el[0], el[2]]));
chart1.series[2].setData(data.map(el => [el[0], el[5]]));
chart1.series[3].setData(data.map(el => [el[0], el[6]]));
},
});
}
这篇关于从JSON文件创建具有多个系列的Highchart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
