javascript - Highchartjs 无法加载

Question

我正在尝试使用 JSON 文件创建两个图表

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/

Answer 1

您的示例代码中有两个问题。

1. 当您设置series.data时，当它已经是一个数组时，您会将其包装在一个数组中。转自:

   data: [val.series.data]
   

   致:

   data: val.series.data
   

2. 由 getJSON 检索的 series.data 返回 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显示的图表数量。