目前我已经设置了以下 Highchart 代码，我想替换我的图表静态数据系列值，该值包含在要从 JSON 文件加载的 HTML 文件中。
当前代码如下所示:
<!doctype html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js" charset="utf-8"></script>
<div style "class:container; align:center">
<div id="myChart" style="width: 315px; height: 315px; background-color: #FFF8EB; align:center"></div>
</div>
<script>
$(function() {
var chart = new Highcharts.Chart({
title: {
text: 'Comparison'
},
chart: {
type: 'line',
backgroundColor: "#FFF8EB",
renderTo: 'myChart'
},
xAxis: {
title: {
text: 'Day of the Year'
},
tickInterval: 7,
ceiling: 366,
min: 1,
max: 366,
minPadding: 0.0,
maxPadding: 0.0
},
yAxis: {
title: {
text: 'Kilometers'
},
tickInterval: 250,
lineWidth: 1,
minPadding: 0.0,
maxPadding: 0.0,
offset: 0,
min: 0
},
labels: {
align: 'right',
step: 30,
x: 0,
y: 0
},
series: [{
name: '2013',
color: '#77B753',
lineWidth: 3,
data: [
[64, 56.22],
[128, 755.13],
[160, 1412.96],
[202, 2125.98],
[236, 2947.44],
[294, 3761.47],
[358, 4097.91],
[359, 4162.09],
[362, 4450.29],
[363, 4552.25]
]
},
{
name: '2014',
color: '#F29B68',
lineWidth: 3,
data: [
[4, 21.73],
[124, 1751.75],
[204, 3741.57],
[234, 4517.99],
[273, 5386.65],
[304, 6073.86],
[327, 6276.24],
[333, 6332.13],
[359, 6615.71],
[360, 6688.89],
[360, 6711.41],
[361, 6749.21],
[362, 6835.68],
[363, 6909.45]
]
},
{
name: '2015',
color: '#6193CF',
lineWidth: 3,
data: [
[11, 31.9],
[66, 406.6],
[102, 1004.81],
[115, 1498.8],
[126, 1777.21],
[154, 2535.4],
[198, 3422.83],
[216, 4063.94],
[248, 4778.75],
[279, 5388.67],
[309, 5772.34],
[314, 5772.34],
[335, 5930.32],
[359, 6433.87]
]
}
]
});
});
</script>
</!doctype>
有没有办法从 JSON 文件加载系列数据/值，如下所示:
[{"key":"154","value":38.91},{"key":"154","value":38.91},{"key":"158","value":136.46},{"key":"159","value":261.07},{"key":"165","value":275.09},{"key":"180","value":285.2},{"key":"186","value":303.49},{"key":"187","value":333.41},{"key":"189","value":369.3},{"key":"191","value":395.63},{"key":"196","value":456.42},{"key":"198","value":488.58},{"key":"200","value":518.69},{"key":"204","value":573.74},{"key":"206","value":637.92},{"key":"210","value":675.29},{"key":"212","value":732.73},{"key":"214","value":778.25},{"key":"218","value":828.53},{"key":"221","value":869.79},{"key":"225","value":925.21},{"key":"227","value":983.09},{"key":"244","value":1003.99},{"key":"247","value":1040.65},{"key":"249","value":1077.33},{"key":"251","value":1105.82},{"key":"253","value":1142.46},{"key":"259","value":1179.35},{"key":"266","value":1214.63},{"key":"271","value":1261.37},{"key":"272","value":1360.57},{"key":"273","value":1385.49},{"key":"291","value":1449.99},{"key":"294","value":1468.74},{"key":"297","value":1521.53},{"key":"358","value":1572.62},{"key":"359","value":1664.44},{"key":"361","value":1725.83},{"key":"362","value":1827.49},{"key":"363","value":1888.31},]
它应该如下所示，但我如何调用它/获取“系列”中的值:
var ytkm2013 = new Array();
$.getJSON('https://link/to/my/data/2013-yearly-distance.json', function(data) {
for (i = 0; i < data.length; i++){
ytkm2013.push([data[i].key, data[i].value]);
}
});
由于我不是 Java/JavaScript 专家，因此欢迎任何帮助/想法。
谢谢， 铝
最佳答案
你已经快要达到你想要的了。您只需要做一些小的更改。
首先，您的图表显示了三个数据系列，但您的 JSON 示例只有一个数据数组，因此下面的示例适用于一个数据数组。
您需要做的第一件事是将图表代码放入 $.getJSON 回调中，因为 $.getJSON 返回一个 promise ，因此您应该仅在之后实例化图表数据返回并由您处理。
处理完所有数据并将其添加到 ytkm2014 数组后，您只需将该系列传递给该数组即可(如下例所示)。
它应该看起来像这样:
var ytkm2013 = new Array();
$.getJSON('https://link/to/my/data/2013-yearly-distance.json', function(data) {
for (i = 0; i < data.length; i++) {
ytkm2013.push([data[i].key, data[i].value]);
var chart = $("#myChart").highcharts({
title: {
text: 'Comparison'
},
chart: {
type: 'line',
backgroundColor: "#FFF8EB",
renderTo: 'myChart'
},
xAxis: {
title: {
text: 'Day of the Year'
},
tickInterval: 7,
ceiling: 366,
min: 1,
max: 366,
minPadding: 0.0,
maxPadding: 0.0
},
yAxis: {
title: {
text: 'Kilometers'
},
tickInterval: 250,
lineWidth: 1,
minPadding: 0.0,
maxPadding: 0.0,
offset: 0,
min: 0
},
labels: {
align: 'right',
step: 30,
x: 0,
y: 0
},
series: [{
name: '2013',
color: '#77B753',
lineWidth: 3,
data: ytkm2013
}]
});
}
});
我不确定进行多次调用来获取不同文件是否是最佳实践，但如果您仍然想这样做，则需要确保在创建图表时加载所有文件。你可以尝试这样的事情:
data2013 = [];
data2014 = [];
data2015 = [];
$.getJSON('http://link2013', function (data) {
//populate data2013
$.getJSON('http://link2014', function (data) {
//populate data2014
$.getJSON('http://link2015', function (data) {
//populate data2015
//create the chart
});
});
});
如果您有多个系列，则必须将它们作为单独的对象传递到 series 数组。做法是这样的:
series : [{
name : '2013',
color : 'red',
lineWidth : 3,
data : ytkm2013
}, {
name : '2014',
color : 'blue',
lineWidth : 3,
data : ytkm2014
}, {
name : '2015',
color : 'green',
lineWidth : 3,
data : ytkm2015
}
]
关于javascript - 具有来自多个 JSON 文件的值的 Highcharts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34496260/