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

时间:2016-04-25 04:26:54

标签: javascript jquery ajax highcharts

我在数组中有来自ajax响应的数据,这里是:

1[System.Func

我希望将此结果传递给高图,这是我的代码:

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

我尝试使用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 }); } ,结果如下: enter image description here

显示结果。我假设console.log中的错误导致当我在那里给出一个硬代码时,图表显示。
但是导致代码:series: data_array,没有图表显示。请帮助我。 ..

1 个答案:

答案 0 :(得分:1)

这是我的饼图示例代码,我是如何做到的,

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); 
    });

刚刚尝试过这种方法,它应该对你有所帮助。记得把系列作为数组放在var options1中。