Highchartjs将不会加载

HTML创建两个图表：

<div id="chart-0" class="chart-box"></div> 
<div id="chart-1" class="chart-box"></div>

JS：

$(function() { 

    Highcharts.setOptions({ 
    chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false, 
     type: 'pie' 
    }, 

    tooltip: { 
     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
    }, 

    plotOptions: { 
     pie: { 
     dataLabels: { 
      enabled: true, 
      format: '<b>{point.name}</b> <br>({point.percentage:.1f} %)' 
     } 
     } 
    } 

    }); 


    $.getJSON('https://api.myjson.com/bins/16jm21', function(data) { 

    $.each(data, function(key, val) { 

     var options = { 
     chart: { 
      renderTo: 'chart-' + key 
     }, 
     title: { 
      text: val.name 
     }, 
     series: [{ 
      name: val.series.name, 
      innerSize: '60%', 
      data: [val.series.data] 
     }] 
     } 
     console.log(val.series.data) 

     var chart = new Highcharts.Chart(options); 


    }); 
    }); 

});

JSON：

[{"name":"Projeto 1","series":{"name":"Status","innerSize":"60%","data":[{"name":"Andamento","y":"60","color":"#DDDF00"},{"name":"Concluído","y":"19.2","color":"#3498DB"},{"name":"Atrasado","y":"10.8"},{"name":"Outro","y":"6.5"},{"name":"Outro 2","y":"3.5"}]}},{"name":"Projeto 2","series":{"name":"Status 2","innerSize":"60%","data":[{"name":"Andamento","y":"60","color":"#DDDF00"},{"name":"Concluído","y":"19.2","color":"#3498DB"},{"name":"Atrasado","y":"10.8"},{"name":"Outro","y":"6.5"},{"name":"Outro 2","y":"3.5"}]}}]

这个json文件有两个图表的数据。在我尝试通过将val.series.data传入options.series.data来推送数据之前，一切似乎都很好。图表加载但它被破坏，它似乎不正确地推val.series.data，它不会在控制台中引发任何错误。我不知道自己做错了什么，但看起来我错过了一些非常简单的事情。

一些帮助，将不胜感激。

这里的jsfiddle：https://jsfiddle.net/9bor1od3/

来源

2017-03-07 Ramon Vasconcelos

，我们在您的示例代码的两个问题。

当您设置series.data时，如果它已经是数组，则将其包装在数组中。从去：
```
data: [val.series.data] 
```
要：
```
data: val.series.data 
```

的series.data检索由getJSON返回字符串为y值。你可以修复的源从去：

{"name":"Outro","y":"6.5"}

要：

{"name":"Outro","y": 6.5}

或者parseFloat结果。甲parseFloat例如：

$.each(val.series.data, function(k, v) { 
    val.series.data[k].y = parseFloat(val.series.data[k].y); 
});

见图表this JSFiddle demonstration显示出来。

来源

2017-03-07 19:15:24

Highchartjs将不会加载

回答

相关问题