使用Highcharts在JS中绘制直方图遇问题：无法读取正态分布数据

问题根源 #

你的代码存在两个核心问题：

1. 数据分布错误：当前用Math.random()生成的是均匀分布数据，不是你需要的正态分布数据。
2. 数据格式错误：直方图需要的是「每个区间的频率统计值」，而你直接把原始随机数数组传给了series，Highcharts无法直接识别并统计区间频率。

修复方案 #

1. 生成正态分布数据 #

使用Box-Muller变换生成符合正态分布的随机数，替代原有的均匀分布生成逻辑。

2. 统计区间频率 #

遍历原始数据，统计每个预设区间内的数据数量，得到频率数组。

3. 调整图表配置 #

移除x轴冗余的min/max/tickInterval配置，确保series传入的是频率数据。

完整修复代码 #

JavaScript部分 #

// 生成正态分布随机数（Box-Muller变换）
function generateNormalRandom(mean = 0, stdDev = 0.15) {
  let u = 0, v = 0;
  while(u === 0) u = Math.random();
  while(v === 0) v = Math.random();
  return mean + stdDev * Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
}

// 生成1000个正态分布数据
const data = Array.from({length: 1000}, () => generateNormalRandom());

// 定义区间（bins）
const bins = [-0.5, -0.45, -0.4, -0.35, -0.3, -0.25, -0.2, -0.15, -0.1, -0.05, 0,
  0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5
];

// 统计每个区间的频率
const frequencies = new Array(bins.length - 1).fill(0);
data.forEach(value => {
  // 找到数据对应的区间索引
  const index = bins.findIndex(bin => value <= bin) - 1;
  if (index >= 0 && index < frequencies.length) {
    frequencies[index]++;
  }
});

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: '正态分布直方图'
  },
  xAxis: {
    title: {
      text: 'Bins'
    },
    categories: bins.slice(0, -1), // 用区间左边界作为分类标签
    gridLineWidth: 0
  },
  yAxis: {
    title: {
      text: 'Frequency'
    },
    allowDecimals: false // 频率为整数，禁用小数刻度
  },
  series: [{
    name: '正态分布数据',
    data: frequencies
  }],
  plotOptions: {
    column: {
      pointPadding: 0,
      groupPadding: 0
    }
  }
});

HTML部分 #

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 100%; height: 400px;"></div>

可选优化 #

如果想让x轴标签更清晰，可以把categories改成区间范围字符串，比如：

categories: bins.slice(0, -1).map((bin, idx) => `${bin}~${bins[idx+1]}`)

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