我有以下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/

10-12 12:24
查看更多