如何基于Highcharts的x数据创建Bell Curve（正态分布）图表？

Highcharts的bellcurve系列默认基于基础系列的y轴数据计算正态分布，要适配你这种「x为数值、y为频次」的数据格式，核心是先把频次数据还原成原始样本集合，再让bellcurve基于这个样本集合生成曲线。

具体步骤： #

• 转换数据格式：将[x, 出现次数]格式的数据展开为原始样本数组——把每个x值重复对应y次。比如[4.5, 19]就转化为包含19个4.5的数组元素。
• 配置隐藏基础系列：添加一个隐藏的系列（设置visible: false），将展开后的样本数据作为该系列的y值，供bellcurve计算使用。
• 关联曲线与基础系列：让bellcurve的baseSeries指向这个隐藏系列的索引，同时调整坐标轴对应关系，保证曲线与原始数据展示匹配。

修改后的代码示例： #

var data = [[1,5], [2,4], [2.9, 3], [3.3,1], [4.5, 19], [4.7, 25], [4.9, 15],
[5.4, 10], [5.6, 11], [6.2, 2]];

// 展开频次数据为原始样本数组
function expandData(rawData) {
  var samples = [];
  rawData.forEach(function(point) {
    var xValue = point[0];
    var count = point[1];
    for (var i = 0; i < count; i++) {
      samples.push(xValue);
    }
  });
  return samples;
}

var sampleData = expandData(data);

Highcharts.chart('container', {
    title: {
        text: 'Bell curve'
    },

    xAxis: [{
        title: {
            text: 'Data'
        },
        alignTicks: false
    }, {
        title: {
            text: 'Bell curve'
        },
        alignTicks: false,
        opposite: true,
        // 让正态曲线x轴与原始数据x轴范围对齐
        min: Math.min(...data.map(p => p[0])),
        max: Math.max(...data.map(p => p[0]))
    }],

    yAxis: [{
        title: { text: 'Occurence' }
    }, {
        title: { text: 'Bell curve' },
        opposite: true
    }],

    series: [{
        name: 'Bell curve',
        type: 'bellcurve',
        xAxis: 1,
        yAxis: 1,
        baseSeries: 1,
        zIndex: -1
    }, {
        name: 'Sample Data',
        type: 'scatter',
        data: sampleData.map(val => [null, val]),
        visible: false,
        accessibility: {
            exposeAsGroupOnly: true
        }
    }, {
        name: 'Original Data',
        type: 'scatter',
        data: data,
        marker: {
            radius: 3
        }
    }]
});

关键说明： #

• expandData函数是核心，它将频次数据还原为原始样本，bellcurve需要基于这些样本计算均值、标准差等统计量来生成正态曲线。
• 隐藏的Sample Data系列仅作为计算数据源，不会在图表中展示，避免干扰原始数据的呈现。
• 手动设置正态曲线的x轴范围，让曲线与原始数据的数值区间保持一致，提升视觉协调性。

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