Question

我已经创建了一个返回这样的数据的ajax请求

Object
negative:3
neutral:3
positive:94

这是直接来自console.log();

我试图使用这些数据创建一个饼图，但是当我尝试它时不会绘制图表，除了学分和控制台中没有错误之外什么都没有显示。但如果我手动输入这样的数据：

series: [{
            name: 'Brands',
            data: [

                { name: 'Positive', y: 94 },
                { name: 'Negative', y: 3 },
                { name: 'Neutral', y: 3 },
            ]
        }]

它没有问题。

我的代码是：

function pieChart(data) {
    // Make monochrome colors and set them as default for all pies
    Highcharts.getOptions().plotOptions.pie.colors = (function () {
        var colors = [],
            base = Highcharts.getOptions().colors[0],
            i;

        for (i = 0; i < 10; i += 1) {
            // Start out with a darkened base color (negative brighten), and end
            // up with a much brighter color
            colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
        }
        return colors;
    }());

    // Build the chart
    Highcharts.chart('pieChart', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        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'
                    }
                }
            }
        },
        series: [{
            name: 'Brands',
            data: data
        }]
    }); 
};

Answer 1

您使用ajax请求从服务器收到的回复是一个对象。

您只需要从收到的回复中创建一个json数组。

var object={'positive':94,'neutral':2,'negative':2};
var data=[];
for(i in object){
    data.push({"name":i,"y":object[i]});
}

并将其设为highchart系列。

series: [{
        name: 'Brands',
        data: data
}]

如何使用json数据作为highcharts饼图？

1 个答案: