堆叠柱状图+双折线图：隐藏堆叠元素时折线能否同步变化？

完全可以实现堆叠柱状图搭配双折线图的组合图表，并且能做到隐藏堆叠柱状图部分元素时，对应折线图同步变化，以下以Highcharts为例给出具体实现方案：

核心实现思路 #

• 先创建堆叠柱状图系列与双折线图系列，确保折线图系列和目标柱状图系列存在数据关联（可以是一对一的对应数据，也可以是基于柱状系列的聚合计算值）。
• 监听图例的点击事件，当点击柱状图系列的图例项时，找到对应的折线图系列，同步切换其可见状态；若折线图是聚合数据，则同步重新计算并更新数据。

代码示例 #

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: '堆叠柱状图+双折线图联动示例'
  },
  xAxis: {
    categories: ['一月', '二月', '三月', '四月', '五月']
  },
  yAxis: [
    {
      title: { text: '柱状图数值' },
      stackLabels: { enabled: true }
    },
    {
      title: { text: '折线图数值' },
      opposite: true
    }
  ],
  legend: {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      events: {
        legendItemClick: function () {
          // 找到与当前柱状系列对应的折线系列（需根据实际系列顺序调整索引关联）
          const targetLineSeries = this.chart.series[this.index + 2];
          // 同步切换折线系列的可见性
          targetLineSeries.setVisible(!targetLineSeries.visible, false);
          // 保留柱状系列默认的切换行为
          return true;
        }
      }
    },
    line: { yAxis: 1 }
  },
  series: [
    { name: '柱状系列1', type: 'column', data: [5, 3, 4, 7, 2] },
    { name: '柱状系列2', type: 'column', data: [2, 2, 3, 2, 1] },
    { name: '折线系列1', type: 'line', data: [5, 3, 4, 7, 2] },
    { name: '折线系列2', type: 'line', data: [2, 2, 3, 2, 1] }
  ]
});

关键说明 #

1. 系列关联逻辑：示例中假设折线系列紧跟在柱状系列之后，通过this.index + 2定位对应折线系列，实际开发中需根据系列定义顺序调整索引规则。
2. 聚合数据联动：如果折线图展示的是堆叠柱状图的总和或其他聚合值，可在legendItemClick事件中遍历所有可见的柱状系列，重新计算每个x轴节点的聚合值，再通过targetLineSeries.setData(newData)更新折线数据。
3. 事件控制：setVisible方法的第二个参数设为false，避免重复触发图表重绘，提升性能。

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