简体   繁体   English

无法在 HighChart 中加载来自 Ajax 响应的数据

[英]Data From Ajax Response Can't Be Loaded In HighChart

I have data from ajax response in array, here it is:我在数组中有来自 ajax 响应的数据,这里是:

"attd": [
  {
    "y": 1,
    "name": "Attendance",
    "sliced": true,
    "selected": true
  },
  {
    "y": 1,
    "name": "SPJ in town",
    "sliced": true,
    "selected": true
  }
]

i want pass this result into highchart, here's my code:我想将此结果传递到 highchart,这是我的代码:

success: function(rs) {
   var attdChart = $(".attdChart");
   attdChart.unbind();
   var jsonData = JSON.parse(rs);
   if (jsonData.success) {
      var data = jsonData.attd;
      var data_array = [];
      $.each(data, function(key, value){
          data_array.push(value);
      });
      $('#containerPiechart').highcharts({
          chart: {
           plotBackgroundColor: null,
           plotBorderWidth: null,
           plotShadow: false,
           type: 'pie',
           height: 200,
           marginRight: 60
          },
          title: {
           text: ''
          },
          tooltip: {
           pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                enabled: false,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                   color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'                      
                }
              },
              showInLegend: true
            }
          },


legend: {
            align: 'right',
            verticalAlign: 'top',
            layout: 'vertical',
            x: 0,
            y: 0
          },


    series: data_array
       });
}

I tried to use console.log , here is the result:我尝试使用console.log ,结果如下: 在此处输入图片说明

It show the result.它显示结果。 I assumed that the error in series: data_array cause when i give a hard code in there, the chart showed.图表显示,当我在其中给出硬代码时,我认为是series: data_array错误series: data_array导致的。
But cause the code: series: data_array ,there is no chart show.Help me please...但是导致代码: series: data_array ,没有图表显示。请帮帮我...

here's my sample code for pie chart that how i do that ,这是我的饼图示例代码,我是如何做到的,

var options1={

        chart:{
            renderTo: 'pie_chart',
            type: 'pie',
            options3d:{
                        enabled: true,
                        alpha: 45,
                        beta: 0
            }

        },
        title: {
            text: 'Title'
        },
         xAxis: {
         categories: []
         },
        yAxis: {

            title: {
                text: 'Time Fixed',

            },
            labels: {
                overflow: 'justify'
            },
            tooltip:{
                formatter: function() {
                 return this.series.name +': '+ this.y;
                 }
            }

        },

        plotOptions: {
              pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth: 35,
                    dataLabels: {
                        enabled: true
                    },

                    showInLegend: true
                },
                series: {

                    animation:{ duration: 1000}
                }
        },
        legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 50,
                floating: true,
                borderWidth: 1,
                backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                shadow: true
        },
        credits: {
            enabled: false
        },
        series: []

    }
    //  chart = new Highcharts.Chart(options1);
    $.getJSON("your_ajax_call_file.php", function(json){
         $.each(json, function(key, value) {
            var series = {}; // <-------------------- moved and changed to object
            series.name = key;
            series.data = value;
            options1.series.push(series); // <-------- pushing series object
        });
        var chart = new Highcharts.Chart(options1); 
    });

just tried out this method , it should helps you definitely .刚刚试过这个方法,它应该对你有帮助。 remember just put series as array in var options1.记住只需将系列作为数组放在 var options1 中。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM