如何用两个数组实现简单Highcharts柱状图，解决Y轴空白无柱形问题

你的代码存在3处语法/逻辑错误，修正后即可正常渲染柱形：

• species数组内的物种名称是字符串类型，没有添加引号，属于JS基础语法错误
• series配置项的data字段绑定了不存在的变量topSpecies，你实际定义的Y轴数值数组是counts，变量名不匹配
• 代码末尾多了一个多余的闭合大括号}，属于语法错误

修正后的完整代码如下：

var species = ['Acer rubrum', 'Tsuga canadensis', 'Pinus strobus'];
var counts = [17746, 10384, 9986];

Highcharts.chart('container', {
  chart: {
    type: "column"
  },
  title: {
    text: "Top 10 Species"
  },
  subtitle: {
    text: "by basal area"
  },
  xAxis: {
    categories: species,
    title: {
      text: "Species"
    }
  },
  yAxis: {
    min: 0,
    // 可选配置：添加Y轴标题更易读
    title: {
      text: "Basal Area Count"
    }
  },
  series: [{ name: "Count", data: counts }]
});

直接使用简单一维数值数组作为Y轴数据源不需要额外格式转换，只要将对应数组正确绑定到series的data属性即可正常渲染。

内容的提问来源于stack exchange，提问作者xanabobana