Question

我的一个视图中有一个highcharts图表，我希望源数据是从返回json响应的路径加载的ajax。

我的json数组就像

var data= [
      {
        "id": 24,
        "title": "BCOM",
        "start": "2014-08-05 12:59:00 PM",
        "end": "2014-08-05 2:59:00 PM",
        "description": "mcom",
        "DIFF": 120
      },
      {
        "id": 26,
        "title": "MCOM",
        "start": "2014-08-10 12:59:00 PM",
        "end": "2014-08-10 4:59:00 PM",
        "description": "mcom",
        "DIFF": 240
      },
      {
        "id": 29,
        "title": "MCOM",
        "start": "2014-08-11 12:59:00 PM",
        "end": "2014-08-11 8:59:00 PM",
        "description": "mcom",
        "DIFF": 480
      },
      {
        "id": 30,
        "title": "MCOM",
        "start": "2014-08-13 12:59:00 PM",
        "end": "2014-08-13 4:59:00 PM",
        "description": "mcom",
        "DIFF": 240
      }
    ];

我的饼图渲染脚本就像下面的

$.each(data, function (i, point) {
    point.y = point.data;
});
$('#container').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: 1,//null,
        plotShadow: false
    },
    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: [{
        type: 'pie',
        name: 'Browser share',
        data: data
    }]
});

数据在饼图上没有正确呈现，并且显示0％且没有颜色的所有内容，我的结果类似于 Pie chart

任何人都可以帮助我吗？

Answer 1

您提供给系列属性（作为数据属性）的数据格式错误。

向系列提供数据的方法之一是使用以下格式。

series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]

请点击此链接：http://www.highcharts.com/demo/pie-basic

Answer 2

您需要解析数据以获得正确的格式，包括对象中的name / y参数。

示例：http://jsfiddle.net/sbochan/sb1mvtfw/1/

var data = [],
    len = dataRaw.length,
    i;

for(i = 0; i<len;i++){
    data.push({
        name: dataRaw[i].title,
        y: dataRaw[i].DIFF
    })
}

过滤json数据以显示在饼图上

2 个答案: