如何修复Highcharts图表中消失的折线（Tooltip仍显示数据）

架构老林

2026-6-29

修复Highcharts多系列仅显示第二条折线的问题

问题原因分析

无效HTML结构：直接将<div>放在<table>标签内不符合HTML规范，浏览器解析异常可能干扰图表渲染。
数据标签格式错误：dataLabels.format中的.B0f是无效数值格式符，会引发渲染异常，导致第一个系列折线无法显示。
版本兼容性隐患：长期未更新的代码在Highcharts版本迭代后，旧配置可能出现兼容性问题。

具体修复步骤

1. 修正HTML容器结构

将图表容器<div>包裹在<table>的<td>标签内，确保HTML结构合法：

<!-- Container code for Temperature extremes -->
<table>
  <tr>
    <td>
      <div id="container1" style="width: 1000px; height: 400px"></div>
    </td>
  </tr>
</table>

2. 修复数据标签格式

把dataLabels.format中的.B0f改为有效的.0f（表示保留0位小数）：

dataLabels: {
    enabled: true,
    format: '{point.y:.0f}'
}

3. 验证Zones配置（可选）

确认zones的value值按递增顺序排列（当前配置已符合要求），若后续仍有问题，可尝试为每个系列单独配置zones，或调整颜色覆盖范围：

series: {
    zones: [{
        color: '#CC0066',
        value: -10
    }, {
        color: '#CC00CC',
        value: 0
    }, {
        color: '#6600CC',
        value: 10
    }, {
        color: '#0000CC',
        value: 20
    }, {
        color: '#0066CC',
        value: 30
    }, {
        color: '#00CCCC',
        value: 40
    }, {
        color: '#00CC66',
        value: 50
    }, {
        color: '#00CC00',
        value: 60
    }, {
        color: '#66CC00',
        value: 70
    }, {
        color: '#CCCC00',
        value: 80
    }, {
        color: '#CC6600',
        value: 90
    }, {
        color: '#CC0000',
        value: Number.MAX_VALUE
    }],
    // 其他配置
}