动态创建Highcharts气泡图

Blackchest 发表于 Dev

布莱克斯特

我正在尝试创建一个脚本，该脚本将使用JSON对象动态生成气泡图。

这是在Ajax调用之后获得的JSON的示例。

 {  
   "Result":"OK",
   "chartOptions":{  
      "title":"Review Data",
      "subtitle":"",
      "graph_title":"bubble"
   },
   "xAxisOption":{  
      "categories":[  
         "January",
         "February",
         "March",
         "April",
         "May",
         "June",
         "July",
         "August",
         "September"
      ]
   },
   "yAxisOption":{  
      "title":"Days"
   },
   "Records":{  
      "A":[  
         "[3,1,20.84],[3,15,119.90],[6,13,22.46],[6,21,240.00],[6,16,5.99],[9,13,60.00],[1,30,104.95],[1,22,69.65],[1,4,101.48],[2,1,63.30],[4,17,70.05],[4,19,19.74],[4,13,36.28],[4,18,22.46],[7,25,61.56],[7,6,83.16],[8,12,8.00],[8,9,60.00],[5,2,80.00],[5,27,30.00]"
      ],
      "B":[  
         "[3,7,133.24],[6,18,250.00],[6,13,11.35],[6,25,98.00],[6,3,215.95],[9,5,48.32],[9,26,68.79],[1,27,38.89],[1,4,12.50],[1,29,62.50],[2,19,60.00],[4,8,288.70],[7,10,17.85],[7,6,15.04],[8,11,8.80],[8,17,108.10],[8,16,30.27]"
      ],
      "C":[  
         "[3,14,28.83],[6,20,66.70],[9,13,73.00],[9,19,32.00],[9,8,15.28],[9,17,18.40],[1,7,71.00],[1,26,90.00],[1,23,13.35],[2,15,10.49],[2,8,12.99],[4,19,70.76],[4,13,34.00],[7,15,65.97],[7,28,60.00],[8,14,21.85],[8,10,143.64],[5,10,68.22]"
      ],
      "D":[  
         "[3,9,95.00],[3,6,21.00],[3,15,24.46],[6,23,18.00],[6,6,50.00],[6,22,23.41],[6,5,22.40],[6,25,28.00],[6,15,37.36],[9,28,89.61],[9,10,14.50],[1,26,10.33],[2,8,133.80],[2,27,39.20],[2,6,47.99],[2,20,65.69],[5,25,100.00],[5,10,85.70]"
      ],
      "E":[  
         "[3,31,62.50],[3,23,77.05],[3,19,9.10],[6,25,29.84],[6,15,43.90],[6,22,10.90],[6,3,78.57],[6,18,120.00],[9,16,65.68],[9,12,32.42],[1,17,15.20],[2,21,100.41],[2,6,72.83],[4,25,80.00],[7,13,11.92],[8,2,28.40],[8,30,90.00],[8,23,21.05],[5,25,7.54],[5,14,299.00]"
      ],
      "F":[  
         "[3,18,63.68],[3,22,29.54],[3,19,16.40],[6,28,82.40],[6,12,19.60],[9,7,22.00],[9,19,30.00],[9,13,37.02],[9,28,10.00],[1,2,60.00],[2,8,7.80],[4,2,65.44],[7,6,210.00],[7,2,14.50],[8,10,49.30],[8,23,56.35],[5,2,14.90],[5,24,7.92],[5,10,11.89]"
      ],
      "G":[  
         "[3,8,14.95],[6,16,6.00],[6,25,45.00],[6,14,89.20],[6,23,58.18],[9,28,19.35],[4,19,51.03],[4,6,120.00],[7,13,65.79],[7,1,67.87],[7,26,79.00],[8,16,29.18],[8,2,29.00],[8,26,70.28],[5,18,50.00],[5,7,69.40]"
      ]
   }
}

我尝试了很多方法，但是没有一个起作用。

例如，我尝试

$.each(msg.Records, function(key, value) {
    chart.series.push({
        data: value,
        name: key
    });
});

或者

$.each(msg.Records, function(key, value) {
    chart.addSeries({
        data: value,
        name: key
    });
});

希望有人能帮助我！
提前致谢。

标记

您的JSON有点无效：

 "A":[  
     "[3,1,20.84],[3,15,119.90],[6,13,22.46],[6,21,240.00],[6,16,5.99],[9,13,60.00],[1,30,104.95],[1,22,69.65],[1,4,101.48],[2,1,63.30],[4,17,70.05],[4,19,19.74],[4,13,36.28],[4,18,22.46],[7,25,61.56],[7,6,83.16],[8,12,8.00],[8,9,60.00],[5,2,80.00],[5,27,30.00]"
     ]

当我以为是字符串数组时，它是单个字符串的数组。如果可以，请在后端修复此问题。

如果您无法在后端修复它，则可以使用JavaScript进行：

var options = {
  chart:{
    type: 'bubble'
  },
  series: []
};

$.each(msg.Records, function(key, value) {
    options.series.push({
        data: $.parseJSON("["+value[0]+"]"), // <-- make it a "correct" string and then parse it
        name: key
    });
});

$('#container').highcharts(options);

这是一个有效的例子。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。