从 AJAX 调用提供的 Highcharts 饼图答案

【问题标题】：Highcharts pie charts served from AJAX call从 AJAX 调用提供的 Highcharts 饼图
【发布时间】：2016-03-13 18:29:38
【问题描述】：

我正在尝试将 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 文件中调用一个函数（在本例中为 'pie_chart_2016' 并将其传递给数据对象。

这是另一个负责将数据渲染成 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.logs 来知道我的函数正在被调用，并且我的数据对象正在被处理。

不过，我得到的只是一个空白面板和左下角的“highcharts.com”，所以 html 也可以工作。

我使用的方法非常适用于条形图，所以我很难过！

感谢您提供的任何帮助。

【问题讨论】：

您在控制台中看到任何错误吗？我认为您在图表区域中什么也看不到，因为该系列未加载，原因是：根据您的配置对象的系列在 plotOptions 内，而它应该在外。
谢谢拉胡尔！这种观察（将系列移到 plotOptions 之外）让我走上了正确的道路。我将用完整的解决方案回答我自己的问题。汤姆

标签： ajax charts highcharts

【解决方案1】：

感谢 Rahul，我将“系列：”移到 plotOptions 之外，并添加了这些行。我应该早点发现这一点，饼图需要“数据”属性，而条形图的 JSON 数组中包含该属性。目前看来运作良好。再次感谢拉胡尔！

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

【讨论】：