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

Posted 2023-05-08

【中文标题】我的列 highcharts 没有呈现任何数据

【英文标题】：My column highcharts is not rendering any data

【发布时间】：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。你知道我做错了什么吗？

【参考方案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/