我在为highcharts图设置JSON文件时遇到问题。该图应该有三组线和一组条。我可以使用脚本中嵌入的数据,但不能使用JSON文件。
到目前为止,这是我的JSON:
{"data":[
{"SM_cap":[144.0,'W1'],
[176.0,'W2'],
[135.6,'W3'],
[148.5,'W4'],
[216.4,'W5'],
[194.1,'W6'],
[95.6,'W7'],
[54.4,'W8'],
[49.9,'W9'],
[71.5,'W10'],
[106.4,'W11'],
[129.2,'W12'],
[144.0,'W13'],
[176.0,'W14'],
[135.6,'W15'],
[148.5,'W16'],
[216.4,'W17'],
[194.1,'W18'],
[95.6,'W19'],
[54.4,'W20'],
[49.9,'W21'],
[71.5,'W22'],
[106.4,'W23'],
[129.2,'W24'],
[144.0,'W25'],
[176.0,'W26'],
[135.6,'W27'],
[148.5,'W28'],
[49.9,'W29'],
[71.5,'W30'],
[106.4,'W31'],
[129.2,'W32']
},
{"MD_cap":[144.0,'W1'],
[176.0,'W2'],
[135.6,'W3'],
[148.5,'W4'],
[216.4,'W5'],
[194.1,'W6'],
[95.6,'W7'],
[54.4,'W8'],
[49.9,'W9'],
[71.5,'W10'],
[106.4,'W11'],
[129.2,'W12'],
[144.0,'W13'],
[176.0,'W14'],
[135.6,'W15'],
[148.5,'W16'],
[216.4,'W17'],
[194.1,'W18'],
[95.6,'W19'],
[54.4,'W20'],
[49.9,'W21'],
[71.5,'W22'],
[106.4,'W23'],
[129.2,'W24'],
[144.0,'W25'],
[176.0,'W26'],
[135.6,'W27'],
[148.5,'W28'],
[49.9,'W29'],
[71.5,'W30'],
[106.4,'W31'],
[129.2,'W32']
},
{"L_cap": [144.0,'W1'],
[176.0,'W2'],
[135.6,'W3'],
[148.5,'W4'],
[216.4,'W5'],
[194.1,'W6'],
[95.6,'W7'],
[54.4,'W8'],
[49.9,'W9'],
[71.5,'W10'],
[106.4,'W11'],
[129.2,'W12'],
[144.0,'W13'],
[176.0,'W14'],
[135.6,'W15'],
[148.5,'W16'],
[216.4,'W17'],
[194.1,'W18'],
[95.6,'W19'],
[54.4,'W20'],
[49.9,'W21'],
[71.5,'W22'],
[106.4,'W23'],
[129.2,'W24'],
[144.0,'W25'],
[176.0,'W26'],
[135.6,'W27'],
[148.5,'W28'],
[49.9,'W29'],
[71.5,'W30'],
[106.4,'W31'],
[129.2,'W32']
},
{"M_share":[144.0,'W1'],
[176.0,'W2'],
[135.6,'W3'],
[148.5,'W4'],
[216.4,'W5'],
[194.1,'W6'],
[95.6,'W7'],
[54.4,'W8'],
[49.9,'W9'],
[71.5,'W10'],
[106.4,'W11'],
[129.2,'W12'],
[144.0,'W13'],
[176.0,'W14'],
[135.6,'W15'],
[148.5,'W16'],
[216.4,'W17'],
[194.1,'W18'],
[95.6,'W19'],
[54.4,'W20'],
[49.9,'W21'],
[71.5,'W22'],
[106.4,'W23'],
[129.2,'W24'],
[144.0,'W25'],
[176.0,'W26'],
[135.6,'W27'],
[148.5,'W28'],
[49.9,'W29'],
[71.5,'W30'],
[106.4,'W31'],
[129.2,'W32']
},
{"weeks":['W1', 'W2', 'W3', 'W4', 'W5', 'W6',
'W7', 'W8', 'W9', 'W10', 'W11', 'W12', 'W13',
'W14', 'W15', 'W16', 'W17', 'W18', 'W19', 'W20',
'W21', 'W22', 'W23', 'W24', 'W25', 'W26', 'W27',
'W28', 'W29', 'W30', 'W31', 'W32']
}
]}
脚本:
$(function () {
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container', zoomType: 'x'
},
title: {
text: 'Historical Average Daily Traded Value and Market Share in N225'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: [{
categories: weeks,
}],
yAxis: [{ // Primary yAxis
labels: {
},
title: {
text: 'Market Share in N225',
}
}, { // Secondary yAxis
title: {
text: 'Value (Billion JPY)',
},
labels: { },
opposite: true
}],
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +
(this.series.name == 'Large Cap' ? ' BJPY' : 'Mid Cap' ? ' BJPY' : 'Small Cap' ? ' BJPY' : '%');
}
},
plotOptions: {
column: {
stacking: "normal"
}
},
legend: {
layout: 'horizontal',
align: 'center',
x: 120,
verticalAlign: 'bottom',
y: 0,
floating: false,
backgroundColor: '#FFFFFF'
},
series: [{
index : 0,
name: 'MarketShare',
color: '#89A54E',
type: 'column',
data: M_share,
},
{
index: 1,
name: 'Large Cap',
color: '#4572A7',
type: 'spline',
yAxis: 1,
data: L_cap,
},
{
index: 2,
name: 'Mid Cap',
color: '#3EDC60',
type: 'spline',
yAxis: 1,
data: MD_cap,
},
{
index: 3,
name: 'Small Cap',
color: '#DC3E3E',
type: 'spline',
yAxis: 1,
data: SM_cap,
}]
},
$.getJSON('data.json', function(data) {
options.series[0].data = data.M_share;
options.series[1].data = data.L_cap;
options.series[2].data = data.M_cap;
options.series[3].data = data.S_cap;
options.xAxis.categories = data.weeks;
var chart = new Highcharts.Chart(options);
});
});
});
答案 0 :(得分:0)
你有错误的JSON文件,你应该使用Object而不是Array作为'data'指令的数据容器。因此,请将JSON文件中的[]
替换为{}
。
答案 1 :(得分:0)
在highcharts中,您需要将一个点定义为pair [x,y],并且x可以是一个字符串(如果您在x轴上使用类别),但y需要是一个数字。在您的情况下,[144.0,' W1']之类的内容不正确。因此,请让json适应正确的表格或准备一个能够返回正确数据的解析器。