动态jSON到Highcharts饼图 [英] Dynamic jSON into Highcharts Pie Chart

问题描述

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

我看了以下是关于SO的问题，因为它是相关的： Ajax JSON到Highcharts饼图

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

（这段代码直接与前面提到的SO帖子相关）

 函数renderChart（divId，chartType，chartTitle）{
 var options = createOption（divId，chartType，chartTitle）; 
 var series = createSeries（）; 
 options.series = series; 
 var chart = new Highcharts.Chart（options）; 
} 
 
函数createOption（divId，chartType，chartTitle）{
 var options = {
图表：{
 renderTo：divId，
 defaultSeriesType：'pie'
}，
 title：{
 text：chartTitle 
}，
 plotOptions：{
 pie：{
 allowPointSelect ：true，
 cursor：'pointer'，
 dataLabels：{
 enabled：false 
}，
 showInLegend：true 
} 
} ，
系列：[] 
}; 
返回选项; 
} 
 
函数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（''）; 
} 
  

预先致谢。

否认。最简单的方法 - 让服务器烹饪系列对象。看到这篇文章：用jQuery为Highcharts迭代JSON响应

解决方案

您正在给Highcharts一个字符串：

 '[{type：pie，name：fruits，data：[[Apple，43.0]，[Pear，57.0]]]'
  

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

  [{
 type：pie，
 name：fruits，
 data：[[Apple，43.0]，[ Pear，57.0]] 
}] 
  

I'm fighting with Highcharts right now trying to get data into it. If I hard-code the options and series, I can get it to work - so it's not my configuration (i.e. scripts, css, etc.)

I looked at the following question here on SO as it was related: Ajax JSON in to Highcharts Pie Chart

Unfortunately, it didn't help. Can someone take a look and see what it is that I'm doing wrong?

(This code is directly related to the previously-mentioned SO post)

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('');
}

Thanks in advance.

Disregard. Easiest way - have the server cook up the series object. See this post: iterate JSON response with jQuery for Highcharts

解决方案

You are feeding Highcharts a string:

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

where it expects an array of configuration object for the series like:

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

这篇关于动态jSON到Highcharts饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！