我有以下JSON数据
var json= {
"PFTs_likely_to_change": [
[16]
],
"PFTs_likely_to_remain_unchanged": [
[2]
]
}
该数据通过网址发送
var data=$.getJSON('{% url "PFTpercentChange" %}');
然后我解析json数据
var json = JSON.parse(data);
现在我想使用highcharts创建柱形图。代码是
$(document).ready(function() {
$("#container").dialog({
autoOpen: false,
width: 600,
height: 500
});
$("#btnclick").click(function() {
$("#container").dialog("open");
//var json = JSON.parse(data);
var json = {
"PFTs_likely_to_change": [
[16]
],
"PFTs_likely_to_remain_unchanged": [
[2]
]
};
//var chart1; // globally available
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column' // change with your choice
},
title: {
text: 'Change in Plant Functional Types'
},
xAxis: {
categories: ['Change in Plant Functional Types']
// Should be replace with JSON
},
yAxis: {
title: {
text: 'Percentage(%)'
}
},
series: [{ //Should be replace with JSON
name: 'PFTs likely to change',
data: [88]
}, {
name: 'PFTs likely to remain unchanged',
data: [12]
}]
});
});
});
我如何动态地做到这一点?
最佳答案
更新Fiddle with chart in dialog with dynamic json data
Here is working fiddle
弹出/模式有一个单独的div。现在将您的highchart容器div放入其中。
更改您的代码以动态获取系列数据,如下所示:
var json= {
"PFTs_likely_to_change": [
[16]
],
"PFTs_likely_to_remain_unchanged": [
[2]
]
}
var seriesData=[];
$.each(json,function(key,val){
console.log(key+"----key----and value"+val);
seriesData.push({name:key,data:val}); //put seriesData in chart's series
});
关于javascript - 根据json数据动态在highcharts中创建柱形图,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35206497/