highcharts 处理json数据生成柱状图

uqxowvwt  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(171)

我尝试使用JSON创建一个简单的 highcharts 条形图,它返回的值如下所示:

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

这是我正在尝试实现的http://jsfiddle.net/o246u8bt/。它没有生成具有不同颜色的条形。这是更新序列的正确方法吗?这正是我希望我的图表看起来像http://jsfiddle.net/6hkcn4qf/2/的方法
提前感谢!

hrysbysz

hrysbysz1#

这是你的函数,用于 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数据是 strings,因此您在y: data[key].price中Map字符串。
只需将其变为**=〉**y: +data[key].price,就可以使用 * 加号 * 将字符串转换为数字。

2.您的options.series是一个数组,而不是对象

因此,您在此处不进行任何设置:options.series.data = processedData(由于options.series是对象数组,因此它具有 * 索引 ,而不是 * 键
只需将其更改为
=〉**options.series[0].data = processedData,即可在options.series数组中创建第一个对象的data键。

3.使用Stackoverflow的内部代码段,而不是外部代码段--如果可能的话。

因为外部的小提琴在几个月内可能会被删除或覆盖。或者外部网站可能会离线。
因此,这个问题可能会在短时间内变得无法理解或对其他用户无用。

相关问题