Question

我现在正在与Highcharts进行斗争，试图将数据输入其中。如果我对选项和系列进行硬编码，我可以让它工作 - 所以它不是我的配置（即脚本，CSS等）。

我在这里查看了以下问题，因为它是相关的：Ajax JSON in to Highcharts Pie Chart

不幸的是，它没有帮助。有人可以看看我做错了什么吗？

（此代码与之前提到的SO帖子直接相关）

function renderChart(divId, chartType, chartTitle){
    var options = createOption(divId, chartType, chartTitle);
    var series = createSeries();
    options.series = series;    
    var chart = new Highcharts.Chart(options);
}

function createOption(divId, chartType, chartTitle){
    var options = {
        chart: {
            renderTo: divId,
            defaultSeriesType: 'pie'
        },
        title: {
            text: chartTitle
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: []
        };
        return options; 
}

function createSeries(){
    var series = [];
    series.push('[');
    series.push('{');
    series.push('"type" : "pie",');
    series.push('"name" : "fruits",');
    series.push('"data" : [');
    series.push('[');
    series.push('"Apple",')
    series.push('43.0');
    series.push('],');
    series.push('[');
    series.push('"Pear",')
    series.push('57.0');
    series.push(']');
    series.push(']');
    series.push('}');
    series.push(']');
    return series.join('');
}

提前致谢。

否认。最简单的方法 - 让服务器煮熟系列对象。请参阅此帖子：iterate JSON response with jQuery for Highcharts

Answer 1

您正在为Highcharts提供一个字符串：

'[{"type" : "pie","name" : "fruits","data" : [["Apple",43.0],["Pear",57.0]]}]'

它需要系列的配置对象数组，如：

[{
    type : "pie",
    name : "fruits",
    data : [["Apple",43.0],["Pear",57.0]]
}]

Answer 2

您可以直接将图表与JSON数据绑定。您只需将json属性名称设置为高图标准。 'Y'表示价值，'name'表示标签。

你的JSON应该如下：

[{name：“Apple”，y：25}，{name：“Pear”，y：20}]

将动态jSON转换为Highcharts饼图

2 个答案: