Ajax JSON进入Highcharts饼图

时间:2022-12-03 17:19:33

I have been encountering issues for the past few days with ajaxing in some sample json data from an external file to populate a pie chart using the Highcharts library.

过去几天我一直遇到问题,从外部文件中获取一些示例json数据,使用Highcharts库填充饼图。

Here is my sample JSON data in file: data.json

这是我在file:data.json中的示例JSON数据

   [
     ["Apples", 43.0],
     ["Pears", 57.0]
   ]

Here is my implementation of highcharts and my AJAX call: (I have omitted unrelated code)

这是我对highcharts和我的AJAX调用的实现:(我省略了不相关的代码)

<script type="text/javascript">
     $(function() {
       var options = {
            chart: {
                renderTo: 'Chart',
                defaultSeriesType: 'pie'
            },
            title: {
               text:'Fruits'
             },

            plotOptions: {
                 pie: {
                     allowPointSelect: true,
                     cursor: 'pointer',
                     dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',

                     }
                 }
            },
            series: [{
               type: 'pie',
               name: 'Fruits',
               data: []
            }]
         };

        $.getJSON('data.json', function(json) {

           options.series.push(json);               
           var chart = new Highcharts.Chart(options);
         }).error(function() {console.log('error');});


     });
</script>

Basically, I want to pass in the JSON, into options.series[].data[]. When proceed with

基本上,我想将JSON传递给options.series []。data []。继续

options.series.push(json);

I get:

我明白了:

[Object, Array[2]] // where the Object contains .name and .type and the Array[2] is my data

I'm pretty sure I need this:

我很确定我需要这个:

[Object] // which contains .data , .name, .type

2 个解决方案

#1


5  

I was actually able to solve my problem by structuring my JSON like so:

我实际上能够通过构造我的JSON来解决我的问题:

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

and instead of doing an array push,

而不是做数组推送,

I set the series parameter to the JSON like this:

我将series参数设置为JSON,如下所示:

 $.getJSON("data.json", function(json)) {
    options.series = json;
    var chart = new Highcharts.chart(options);
 }

#2


0  

Just in case anyone else runs across this like I did. I solved the same problem with series.data.push as series is an array also, highcharts would not have known we were actually trying to push the value into data instead.

以防万一其他人像我一样遇到这个问题。我用series.data.push解决了同样的问题,因为系列也是一个数组,highcharts不会知道我们实际上是试图将值推送到数据中。

#1


5  

I was actually able to solve my problem by structuring my JSON like so:

我实际上能够通过构造我的JSON来解决我的问题:

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

and instead of doing an array push,

而不是做数组推送,

I set the series parameter to the JSON like this:

我将series参数设置为JSON,如下所示:

 $.getJSON("data.json", function(json)) {
    options.series = json;
    var chart = new Highcharts.chart(options);
 }

#2


0  

Just in case anyone else runs across this like I did. I solved the same problem with series.data.push as series is an array also, highcharts would not have known we were actually trying to push the value into data instead.

以防万一其他人像我一样遇到这个问题。我用series.data.push解决了同样的问题,因为系列也是一个数组,highcharts不会知道我们实际上是试图将值推送到数据中。