Question

我正在尝试将json数据从mysql / php渲染到Highcharts的不同方法。到目前为止，我已经成功使用这种方法渲染条形图，但出于某种原因，我无法在饼图中渲染数据。

一个js文件处理AJAX调用：

$(function  () {

var select_program = program_type_php;
var select_year = '2016';

console.log ('pie_chart'+program_type_php);

 $.ajax({
url: 'model/job_group_pie_chart.php',
data: {user: 2, select_program:select_program, select_year:select_year},
type: 'GET',
async: true,
dataType: "json",

success: function (year_2016) {
   pie_chart_2016(year_2016);
    console.log('data 2016 job groups'+year_2016);



}

}）;

成功后，我在另一个js文件中调用一个函数（在本例中，＆＃39; pie_chart_2016＆＃39;并将数据对象传递给它。

这是另一个负责将数据呈现为Highchart的js文件：

function pie_chart_2016 (year_2016) {

console.log('year_2016'+year_2016);
$('#pie-chart1').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: ''
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }   

                },

                showInLegend: true

            },
        series: year_2016

        }
});

};

我已经检查过了，我从我的php文件中获得了有效的json：

 [{name:"Group1",y:829},{name:"Group2",y:9247},{name:"Group3",y:71}]

这些是原始计数（829,9247,71）但是当我能够通过手动输入值来获取饼图时，Highcharts为我计算了百分比 - 很好！

我还设置了足够的console.log来知道正在调用我的函数，并且正在处理我的数据对象。

尽管如此，我得到的只是一个空白面板，而且＆＃39; highcharts.com＆＃39;在左下角，所以html也在工作。

我使用的方法与条形图非常相似，所以我很难过！

感谢您提供的任何帮助。

Answer 1

感谢Rahul，我感动了系列：＆＃39;在plotOptions之外，并添加了这些行。我应该早点抓住这个，饼图需要数据＆＃39;属性，而条形图包含在他们的JSON数组中。似乎现在运作良好。再次感谢Rahul！

series: [{
        name: 'Job Group',
        colorByPoint: true,
        data: year_2016 
        }]

从AJAX调用

1 个答案: