我尝试使用JSON数据绘制JSON数据。JSFiddle 下面是我在JavaScript中的JSON数据。
var JSON = [
{ name:"Maintenance",
data:[[2017-06-26,1.5],
[2017-07-03,5.2],
[2017-07-10,1.65],
[2017-07-17,2.5],
[2017-07-24,1.5]
]
},
{ name:"Others",
data:[[2017-06-26,1.5],
[2017-07-03,1.5],
[2017-07-10,1.5],
[2017-07-17,1.25],
[2017-07-24,1.5]
]
},
{ name:"Project",
data:[[2017-06-26,6.5],
[2017-07-03,6.1],
[2017-07-10,6.7],
[2017-07-17,7],
[2017-07-24,6.5]
]
},
{ name:"Training",
data:[[2017-06-26,0],
[2017-07-03,0.75],
[2017-07-10,1.9],
[2017-07-17,0.5],
[2017-07-24,1]
]
},
{ name:"Day-Off",
data:[[2017-06-26,0],
[2017-07-03,0],
[2017-07-10,0],
[2017-07-17,0],
[2017-07-24,1]
]
}]
然而,图表看起来很奇怪。对于每个系列,都有一条连接起点和终点的附加线。另外,x轴值不是我想要的日期。
//Draw chart
Highcharts.chart('trend_bl', {
title: {
text: 'Trend by Business Lines'
},
yAxis: {
title: {
text: ' Resource Allocation'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series : JSON,
});
谁能告诉我为什么会这样呢?另外,我还想知道Highchart中线图和饼图的正确JSON数据结构。
答案 0 :(得分:2)
JSON
中的约会日期应为字符串。此日期应转换为毫秒。
var JSON = [{
name: "Maintenance",
data: [
['2017-06-26', 1.5],
['2017-07-03', 5.2],
['2017-07-10', 1.65],
['2017-07-17', 2.5],
['2017-07-24', 1.5]
]
}, {
name: "Others",
data: [
['2017-06-26', 1.5],
['2017-07-03', 1.5],
['2017-07-10', 1.5],
['2017-07-17', 1.25],
['2017-07-24', 1.5]
]
}, {
name: "Project",
data: [
['2017-06-26', 6.5],
['2017-07-03', 6.1],
['2017-07-10', 6.7],
['2017-07-17', 7],
['2017-07-24', 6.5]
]
}, {
name: "Training",
data: [
['2017-06-26', 0],
['2017-07-03', 0.75],
['2017-07-10', 1.9],
['2017-07-17', 0.5],
['2017-07-24', 1]
]
}, {
name: "Day-Off",
data: [
['2017-06-26', 0],
['2017-07-03', 0],
['2017-07-10', 0],
['2017-07-17', 0],
['2017-07-24', 1]
]
}];
//updating jsons date to millisecond
Object.keys(JSON).map(function(key, index) {
JSON[key].data.map(function(value, keys, index) {
JSON[key].data[keys][0]=new Date(value[0]).getTime()
})
});
//console.log(JSON)
答案 1 :(得分:0)
首先,你在演示中犯了一个错误。而不是data: JSON
它应该是series: JSON
。其次,将你的日期放在字符串中,否则它们将被视为数字(例如2017 - 06 - 26 = 1985)。