我正在制作一张highcharts.js的图表,但是当图表显示不符合现有数据时,我觉得很难。
我在JSFiddle创建了一个图表。
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
credits: {
enabled: false
},
title: {
text: ''
},
colors: ['#ff0000', '#18b55b'],
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des']
}],
yAxis: [{
min: 0,
labels: {
enabled: false
},
title: {
text: '',
}
}, {
min: 0,
title: {
text: '',
},
labels: {
formatter: function () {
return this.value + '%';
}
}
}],
plotLines: [{
value: 0,
width: 10,
color: '#808080'
}],
tooltip: {
shared: true,
useHTML: true,
formatter: function () {
var s = '<table>';
$.each(this.points, function () {
s += '<b style="text-align: right; color: ' + this.series.color + '">' + this.y + '%' + this.point.value + '</b><br/>';
});
return s;
},
footerFormat: '</table>',
},
legend: {
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{"name":"Aktual","type":"column","yAxis":1,"data":[{"y":0,"value":""},{"y":0,"value":""},{"y":12.06
,"value":" - 122,890,156"},{"y":2.66,"value":" - 27,080,668"},{"y":0,"value":""},{"y":0,"value":""},
{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0
,"value":""}]},{"name":"Plan","type":"spline","data":[{"y":0,"value":""},{"y":0,"value":""},{"y":2.17
,"value":""},{"y":2.17,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value"
:""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""},{"y":0,"value":""}]}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>