带线的堆积柱形条

Question

是否可以用 2 线图显示堆叠列？ 在与堆积柱形图和折线图的组合进行交互时，是否可以显示每个折线图的变化，因为我们从堆积柱中隐藏了几个元素（比例）？

有关更多上下文，请查看此链接 可能会帮助你理解 谢谢帮助

我试着寻找这种情况的例子，但到处都只显示堆积柱的变化，而折线图保持原样

Answer 1

要创建具有堆叠柱形和两条线的图表，请定义适当数量的系列并为柱形系列设置堆叠。例如：

Highcharts.chart('container', {
  plotOptions: {
    column: {
      stacking: 'normal'
    }
  },
  series: [{
    type: 'line',
    data: [...]
  }, {
    type: 'line',
    data: [...]
  }, {
    type: 'column',
    data: [...]
  }, {
    type: 'column',
    data: [...]
  }, ...]
});

实例： http://jsfiddle.net/BlackLabel/jL0sq2vo/

文档： https://www.highcharts.com/docs/chart-concepts/series

---

我不知道线系列如何连接到您的案例中的列系列，但基本上您可以使用

show

/

hide

系列事件将更改应用于线系列数据。例如：

  plotOptions: {
    column: {
      stacking: 'normal',
      events: {
        show: function() {
          const series = this.chart.series;

          baseLine1 = baseLine1.map(el => el + 1);
          baseLine2 = baseLine2.map(el => el + 1);

          series[0].setData(baseLine1, false);
          series[1].setData(baseLine2);
        },
        ...
      }
    }
  }

实例： http://jsfiddle.net/BlackLabel/rg4mdaov/

API 参考： https://api.highcharts.com/class-reference/Highcharts.Series#setData

Answer 2

可以根据Stacking column改变legendClick中line series的dataSource来满足需求。

请找到下面附带的示例和代码片段以供参考。

legendClick: (args) => {

        let value;

       for (let i =0 ; i<clickedIndex.length; i++ ){

           if (clickedIndex[i] === args.series.index )

           {

            value = true;

            clickedIndex.splice(i, 1);

            clickedIndexCount--;

           }

       }

       if (!value) {

       // clickedIndex = args.series.index;

        clickedIndex[clickedIndexCount] = args.series.index;

        clickedIndexCount++;

       }

       chart.refresh();

}

点击图例后：线系列基于可见列值

点击图例之前：基于两列平均值的线系列

示例：https://stackblitz.com/edit/z7svdm-z9aah7?file=index.ts