我的列 highcharts 没有呈现任何数据答案

【问题标题】：My column highcharts is not rendering any data我的列 highcharts 没有呈现任何数据
【发布时间】：2019-12-20 08:46:03
【问题描述】：

我正在尝试创建一个列高图，我最终想要添加向下钻取。现在我只想创建一个简单的柱形图。我的代码没有渲染任何东西。

我做错了什么？

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JSON：

var json = [{
 hp: "Harry",
 starts: 42,
 completes: 142
}, {
  hp: "Ron",
  starts: 2,
  completes: 90
}, {
  hp: "Hermione",
  starts: 75,
  completes: 175
}];

JavaScript：

 var series1 = {
 name: '',
 data: []
 }
 json.forEach(elem => {
  series1.data.push({
    x: +elem.hp,
    y: elem.starts
   });
 });

 Highcharts.chart('container', {
 chart: {
   type: 'column'
  },
  xAxis: {
    type: 'category'
  },
   series: [
     series1
   ]
   });

我的图表：

我也不需要传说。为什么我的图表没有渲染？

【问题讨论】：

你想在这里显示什么？你的图表应该显示什么？
hp 在 x 轴上并从 y 轴开始。所以 3 列。
@Clafou。你知道我做错了什么吗？

标签： javascript jquery json highcharts bar-chart

【解决方案1】：

我在这里创建了一个简单的示例：https://jsfiddle.net/3bvopn5f/

据我了解，如果您想使用条形图创建类别，您还应该包含其他类别的数据（null 或 0）。

这里有一些有趣的 highcharts 选项：

chart: {
   type: 'column'
  },
  xAxis: {
    categories: json.map(elem => elem.hp)
  },

  series: [{
    name: 'Harry Potter',
    data: [42, 0, 0]
  }, {
    name: 'Ron',
    data: [0, 2, 0]
  }, {
    name: 'Hermione',
    data: [0, 0, 75]
  }],

使用数据操作，可能会这样做：

for(var i = 0; i < json.length; i++) {
    serie1.push({
    name: json[i].hp,
    data: json.map(v => v.hp === json[i].hp ? v.starts : 0),
  })
}

这里是你的数据被操纵以适应图表的小提琴：https://jsfiddle.net/znwauftv/

【讨论】：