Highchart - 使用 json 预处理数据

Question

我正在尝试使用 json 数据生成一个简单的条形图。这是我在不使用 json 数据 (http://jsfiddle.net/6hkcn4qf/2/) 的情况下进行的尝试。

我需要使用这个 mock json https://mocki.io/v1/af3abd57-1c07-4df0-b591-4d17796e2c29 to generate the same bar. Here is the fiddle I am trying to achieve http://jsfiddle.net/6hkcn4qf/3/。它没有根据 highchart 文档生成图表。

有人可以指导我如何实现这一目标吗？

另外，请问如何根据水果名称动态更改条形颜色？

谢谢

Answer 1

您需要对数据进行预处理，使其适应 Highcharts 要求的格式。例如：

  $.ajax({
    url: 'https://mocki.io/v1/af3abd57-1c07-4df0-b591-4d17796e2c29',
    success: function(data) {
      const processedData = [];

      for (let key in data) {
        processedData.push({
          name: key,
          y: data[key]
        });
      }

      options.series[0].data = processedData;
      Highcharts.chart('container', options);
    }
  });

现场演示： http://jsfiddle.net/BlackLabel/wm2pzrxj/

API参考：https://api.highcharts.com/highcharts/series.bar.data

Highchart - 使用 json 预处理数据

Highchart - Preprocess data using json

jquery

json

highcharts