Highchart -使用json预处理数据

Question

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

我需要使用这个mock jsonhttps://mocki.io/v1/af3abd57-1c07-4df0-b591-4d17796e2c29来生成相同的酒吧。这里是小提琴我试图实现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