使用Highcharts实现直方图时出现脚本错误，图表无法显示

你的代码存在三个核心问题导致图表无法正常显示：

• 缺少基础数据系列：Highcharts的直方图类型需要基于一个包含原始数据的基础系列（通过baseSeries指定），你当前代码仅定义了直方图系列，未提供原始数据对应的基础系列，导致图表无数据来源。
• 轴索引不匹配：你给直方图系列指定了xAxis:1和yAxis:1，但配置里只定义了一组坐标轴（默认索引为0），索引不匹配会导致图表无法关联正确的轴。
• 轴标题不明确：x轴与y轴标题均为"Histogram"，无法清晰区分数据含义，建议调整为更贴合业务的名称。

以下是修正后的完整代码：

var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3,
    4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4,
    3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5,
    3.8, 3, 3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9,
    2.7, 2, 3, 2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9,
    3, 2.8, 3, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6,
    3, 2.6, 2.3, 2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9,
    2.5, 3.6, 3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7,
    3.3, 3.2, 2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1,
    3.1, 3.1, 2.7, 3.2, 3.3, 3, 2.5, 3, 3.4, 3];

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

    xAxis: [{
        title: { text: '数值区间' },
        alignTicks: false
    }],

    yAxis: [{
        title: { text: '频数' }
    }],

    plotOptions: {
        histogram: {
            accessibility: {
                point: {
                    valueDescriptionFormat: '{index}. {point.x:.3f} to {point.x2:.3f}, {point.y}.'
                }
            }
        }
    },

    series: [
        // 基础数据系列：隐藏显示，用于直方图计算
        {
            id: 's1',
            type: 'scatter',
            data: data,
            visible: false // 隐藏原始散点系列
        },
        {
            name: '直方图',
            type: 'histogram',
            baseSeries: 's1',
            zIndex: -1
        }
    ]
});

代码说明：

• 添加了id为s1的散点系列，将原始数据传入并设置为隐藏，作为直方图的计算基础。
• 移除了直方图系列中错误的xAxis:1和yAxis:1配置，默认使用索引为0的坐标轴。
• 修改了x轴和y轴的标题，使其含义更清晰。

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