处理 json 数据以生成条形图

Question

我正在尝试用 JSON 创建一个简单的 highchart 条形图， returns 值是这样的：

[{
"name":"Apple",
"price":"40",
"date":"2022-02-04"
},
{
"name":"Mango",
"price":"80",
"date":"2022-08-02"
},
{
"name":"Orange",
"price":"60",
"date":"2021-01-09"
}]

这是我的 fiddle http://jsfiddle.net/o246u8bt/ I am trying to achieve. It is not generating the bar with the different bar colors. Is this the right way of updating the series? Here is exactly the way I want my graph to look like http://jsfiddle.net/6hkcn4qf/2/

提前致谢！

Answer 1

您的代码中有几个问题。这是 ajax 成功请求的函数：

success: function(data) {
  alert(JSON.stringify(data));
  const processedData = [];

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

  options.series.data = processedData;

  Highcharts.chart('container', options);
}

1。你的数据是字符串，不是数字

您的 JSON.stringified 数据是 字符串 ，因此您在 y: data[key].price.

中映射字符串

直接改成=>y: +data[key].price。使用 加号 可以将字符串转换为数字。

2。你的 options.series 是数组，不是对象

所以，你没有在这里设置任何东西：options.series.data = processedData（因为 options.series 是一个对象数组，它有 索引 ，而不是 键)

只需将其更改为 => options.series[0].data = processedData 即可创建 options.series 数组中第一个对象的 data 键。

3。使用 Whosebug 的内部代码片段，而不是外部代码片段 - 如果可能的话。

因为几个月后的外部小提琴可能会被删除或覆盖。 或者外部站点可以离线。

因此，这个问题可能会在短时间内对其他用户变得un-understandable或无用。