[英]Populate JSON object to highchart bar chart
我是新手,將JSON對象解析為highchart,我想繪制基本的條形圖。 我已經完成了圖的標題。 問題是我想顯示的系列沒有顯示(計數為系列,qpAnswer為xAxis)。
這是我的JSON數據
[
{
qpQuestion: "Is that a dog?",
qpAnswerId: "1",
qpAnswer: "Yes",
count: "0"
},
{
qpQuestion: "Is that a dog?",
qpAnswerId: "2",
qpAnswer: "No",
count: "0"
},
{
qpQuestion: "Is that a dog?",
qpAnswerId: "3",
qpAnswer: "ok",
count: "0"
}
]
這是我的JS
var url="sections.php?request=graph";
$.getJSON(url,function(data1){
var options={
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: data1[0].qpQuestion
},
xAxis:{
categories: data1.qpAnswer
title: {
text: 'Answer'
}
},
yAxis: {
min: 0,
title: {
text: 'Answer Count'
}
},
series:data1
};
var chart = new Highcharts.Chart(options);
});
您可以預處理數據以形成如下形式
var answers = ['Yes','No' ,'OK'];
var answer_counts= [
{name: 'Yes', data : [2,0,0]},
{name: 'No', data: [0,3,0]},
{name: 'OK', data: [0,0,1]} ];
然后用
var options={
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text:'QA Answers'
},
xAxis:{
categories: answers,
title: {
text: 'Answer'
}
},
yAxis: {
min: 0,
title: {
text: 'Answer Count'
}
},
series:answer_counts
};
var chart = new Highcharts.Chart(options);
我已經在小提琴中做了, http://jsfiddle.net/gwC2V/1/
讓我們知道是否有幫助。
下面的示例可以幫助您
JSON文件
[
[1,12],
[2,5],
[3,18],
[4,13],
[5,7],
[6,4],
[7,9],
[8,10],
[9,15],
[10,22]
]
使用getJSON()從JSON文件中檢索數據並填充到CHART
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
$.getJSON('data.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
這是鏈接
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.