使用 Json 的 Highcharts

问题描述 投票:0回答:1

我正在尝试编写一个生成折线图(Highcharts)的脚本。源JSON格式为:

[
    {"name":"Not used","data":[1,1,1]},
    {"name":"Excellent","data":[3]},
    {"name":"Good","data":[1,3,1]},
    {"name":"Average","data":[1,1]},
    {"name":"Poor","data":[1,1,1]}
]

我需要的是一种在图表(Highcharts)中显示查询结果的方法,我尝试编写脚本但结果不正确。

$(function () {
var chart;
$(document).ready(function() {
$.getJSON("../charts/1-2-4-overall_year_chart.php", function(json) {
 
chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly trend',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Percentage %'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: json
});
});
 
});
 
});

我试图让图表有一个图表,显示差、平均、好、优秀和未用作 x 轴上的水平线,以按月份分组的百分比。 我尝试过创建一个 JSFiddle,但即使这样我也无法让它工作。

My chart display

JSFiddle

任何人都可以抽出时间来帮助我吗?

javascript highcharts
1个回答
1
投票

每个系列中的值都是按照顺序绘制的。正如我所看到的,数组的最大长度是 3,这意味着您引用从 0 到 2 的类别。如果您需要在声明值(四月)中有一个点,请使用构造 [x,y] (3,3),其中x 是类别索引。

© www.soinside.com 2019 - 2024. All rights reserved.