Question

我确切知道如何在 Highcharts 中启用图例，但问题是如何根据同一系列中的点的值创建图例，因为每个图例都用于表示系列（a积分）。

有一张图片（图表类型：瀑布）我在excel下面画出了我想要的东西，你可以清楚地看到橙色传奇代表获得，而蓝色代表代表损失，但我如何在Highcharts中实现这一目标？

我搜索了很多但最终失望了，请帮忙。

Answer 1

这样做的一种方法是使用虚拟系列。

使用空数据数组创建一个包含所需名称和颜色的额外系列：

series: [{
  name: 'Actual Series',
  data: [...data, with points colored as needed...]
}, {
  grouping: false,
  name: 'Dummy Series',
  color: 'chosen color',
  data: []
}]

您还希望将grouping设置为false，以便虚拟系列不占用绘图上的额外空白。

小提琴：

http://jsfiddle.net/jlbriggs/vjd3p4s0/

（，使用瀑布演示同样的事情： http://jsfiddle.net/jlbriggs/7vtbzh53/）

另一种方法是在图表之外创建自己的图例。

无论哪种方式，您都将失去单击图例以显示/隐藏橙色列系列的功能。如果你的能力对你很重要，你必须建立一个更复杂的功能来编辑legendItemClick上的数据。

Answer 2

编辑问题的解决方案。您可以将数据映射到两个系列，并将堆叠设置为“正常”。

const data = [10, 20, -10, 20, 10, -10];
const dataPositive = data.map(v => v >= 0 ? v : 0);
const dataNegative = data.map(v => v < 0 ? v : 0);

const options = {
    chart: {
    type: 'column'
  },
  series: [{
    color: 'blue',
    data: dataPositive,
    stacking: 'normal'
  }, {
    color: 'orange',
    data: dataNegative,
    stacking: 'normal'
  }]
}

const chart = Highcharts.chart('container', options);

实例： https://jsfiddle.net/j2o5bdgs/

[编辑]

瀑布图解决方案：

const data = [10, 20, -30];
const colors = Highcharts.getOptions().colors;

const options = {
  chart: {
    type: 'waterfall'
  },
  series: [{
    // Single series simulating 2 series
    data: data.map(v => v < 0 ? {
      y: v,
      color: colors[0]
    } : {
      y: v,
      color: colors[3]
    }),
    stacking: 'normal',
    showInLegend: false
  }, {
    // Positive data serie
    color: colors[3],
    data: [10, 20, 0],
    visible: false,
    stacking: 'normal',
    showInLegend: false
  }, {
    // Negative data serie
    color: colors[0],
    data: [0, 0, -30],
    visible: false,
    stacking: 'normal',
    showInLegend: false
  }, {
    // Empty serie for legend item
    name: 'Series 1',
    color: colors[3],
    stacking: 'normal',
    events: {
      legendItemClick: function(e) {
        const series = this.chart.series;
        const invisibleCount = document.querySelectorAll('.highcharts-legend-item-hidden').length;
        if (this.visible) {
          if (invisibleCount === 1) {
            series[0].hide();
            series[1].hide();
            series[2].hide();
          } else {
            series[0].hide();
            series[2].show();
          }
        } else if (invisibleCount === 2) {
          series[0].hide();
          series[1].show();
        } else {
          series[0].show();
          series[2].hide();
        }
      }
    }
  }, {
    // Empty serie for legend item
    name: 'Series 2',
    color: colors[0],
    stacking: 'normal',
    events: {
      legendItemClick: function(e) {
        const series = this.chart.series;
        const invisibleCount = document.querySelectorAll('.highcharts-legend-item-hidden').length;
        if (this.visible) {
          if (invisibleCount === 1) {
            // hide all
            series[0].hide();
            series[1].hide();
            series[2].hide();
            return;
          }
          series[0].hide();
          series[1].show();
        } else {
          if (invisibleCount === 2) {
            series[0].hide();
            series[2].show();
            return;
          }
          series[0].show();
          series[1].hide();
        }
      }
    }
  }]
}

const chart = Highcharts.chart('container', options);

实例： https://jsfiddle.net/2uszoLop/

Highcharts如何根据点的值创建图例

2 个答案: