Highcharts折线图仅显示点？需为X轴设置name属性实现月份标注

我来帮你搞定这个问题！你遇到的折线只显示点不连线的情况，是因为当前的data对象数组写法让Highcharts把每个点当成了独立的离散类别，没有识别出它们是连续的折线数据点。下面给你两种解决方案，推荐第一种更简洁规范的写法：

方案1：显式配置X轴类别与名称（推荐） #

这种方法既满足X轴标注月份的需求，又能让折线正常渲染，是Highcharts的标准用法：

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    xAxis: {
        name: '月份', // 设置X轴的名称
        categories: ['Septiembre', 'Octubre'] // 对应每个数据点的月份类别
    },
    series: [{
        colorByPoint: true,
        data: [1687, 2085] // 直接用数值数组，顺序与categories一一对应
    }]
});

为什么这个方法有效？ #

通过xAxis.categories定义X轴的类别（月份），同时设置xAxis.name标注X轴，series的data数组只需按顺序传入数值即可。Highcharts会自动将每个数值映射到对应的类别上，这样折线就能正常连接起来，X轴也有了明确的名称和月份标签。

方案2：保留data对象数组并添加x坐标 #

如果你一定要保留原有的data对象数组格式，可以给每个数据点加上x属性指定其在X轴上的索引位置，让Highcharts识别出点的顺序从而连线：

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    xAxis: {
        name: '月份', // 设置X轴名称
        labels: {
            // 自定义标签显示对应的月份名称
            formatter: function() {
                return this.chart.series[0].data[this.pos].name;
            }
        }
    },
    series: [{
        colorByPoint: true,
        data: [
            { name: 'Septiembre', y: 1687, x: 0 },
            { name: 'Octubre', y: 2085, x: 1 }
        ]
    }]
});

这个方法通过x属性给每个点指定了连续的位置索引，同时用labels.formatter提取data对象里的name作为X轴标签，也能实现需求，但代码相对繁琐一些。

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