如何在Highcharts条形图旁添加上月差异值的额外系列标签？

问题描述 #

需要复刻指定条形图，在主销售数值标签旁添加上月差异值（以括号形式显示，如(-10)、(+45)），原代码通过隐藏系列的方式尝试添加标签，但由于隐藏系列的dataLabels会随系列一同隐藏，无法实现需求。

解决方案 #

无需额外创建隐藏系列，直接在主销售系列的dataLabels中通过自定义格式化函数，将主数值与差异值合并显示，同时可自定义差异值的样式。

修改后的代码示例 #

// Define chart options
var options = {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Sales by Product'
  },
  xAxis: {
    categories: ['RO', 'RS', 'HU']
  },
  yAxis: {
    title: {
      text: 'Sales (USD)'
    }
  },
  series: [{
    name: 'Sales',
    data: [110, 122, 133],
    // 存储上月差异数据
    diffData: [-10, 45, 23],
    dataLabels: {
      enabled: true,
      // 启用HTML以自定义样式
      useHTML: true,
      formatter: function() {
        // 获取当前数据点索引，匹配对应差异值
        const index = this.point.index;
        const diffValue = this.series.userOptions.diffData[index];
        // 格式化差异值，正数前添加+号
        const diffText = diffValue > 0 ? `(+${diffValue})` : `(${diffValue})`;
        // 组合主数值与差异值，差异值设为灰色
        return `${this.y} <span style="color: gray; margin-left: 8px;">${diffText}</span>`;
      }
    }
  }]
};

// Initialize chart
Highcharts.chart('container', options);

关键说明 #

1. 数据存储：在主系列中新增diffData属性存储上月差异值，通过数据点索引对应关联主数值与差异值。
2. 格式化函数：利用formatter函数拼接主数值和差异值，通过useHTML: true实现差异值的颜色自定义。
3. 样式控制：通过HTML标签调整差异值的颜色、间距，让标签布局更符合需求。

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