Javascript Highcharts如何基于点的值创建图例

我确切地知道如何在Highcharts中启用图例，但问题是如何基于来自同一系列的点的值创建图例，因为每个图例都用于表示一个系列（点的集合）

下面是我在excel中绘制的一张图片（图表类型：瀑布），说明了我想要什么，您可以清楚地看到，橙色图例代表获得，蓝色图例代表损失，但如何在Highcharts中实现这一点？

---

我已经搜索了很多，但以失望告终，请帮忙。

一种方法是使用虚拟系列

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

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

您还需要将

分组

设置为

假

，以便虚拟序列不会占用绘图上的额外空白空间

小提琴：

（同样，使用瀑布演示时也是如此：）

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

---

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

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

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);

const data=[10,20，-10,20,10，-10]；
constdatapositive=data.map（v=>v>=0？v:0）；
constdatanegative=data.map（v=>v<0？v:0）；
常量选项={
图表：{
类型：“列”
},
系列：[{
颜色：“蓝色”，
数据：数据为正，
堆叠：“正常”
}, {
颜色：“橙色”，
数据：数据为负，
堆叠：“正常”
}]
}
const chart=Highcharts.chart（'container'，选项）；

实例：

[编辑]

瀑布图的解决方案：

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);

const data=[10,20，-30]；
const colors=Highcharts.getOptions（）.colors；
常量选项={
图表：{
类型：“瀑布”
},
系列：[{
//单系列模拟2系列
数据：data.map（v=>v<0{
y:v，
颜色：颜色[0]
} : {
y:v，
颜色：颜色[3]
}),
堆叠：“正常”，
showInLegend:false
}, {
//正数据系列
颜色：颜色[3]，
数据：[10,20,0]，
可见：假，
堆叠：“正常”，
showInLegend:false
}, {
//负数据系列
颜色：颜色[0]，
数据：[0,0，-30]，
可见：假，
堆叠：“正常”，
showInLegend:false
}, {
//图例项的空序列号
名称：“系列1”，
颜色：颜色[3]，
堆叠：“正常”，
活动：{
legendItemClick:函数（e）{
常量系列=this.chart.series；
const invisibleCount=document.queryselectoral（'.highcharts图例项隐藏'）。长度；
如果（这个可见）{
如果（不可见计数===1）{
系列[0]。隐藏（）；
系列[1]。隐藏（）；
系列[2]。隐藏（）；
}否则{
系列[0]。隐藏（）；
系列[2]。显示（）；
}
}else if（invisibleCount==2）{
系列[0]。隐藏（）；
系列[1]。显示（）；
}否则{
系列[0]。显示（）；
系列[2]。隐藏（）；
}
}
}
}, {
//图例项的空序列号
名称：'系列2'，
颜色：颜色[0]，
堆叠：“正常”，
活动：{
legendItemClick:函数（e）{
常量系列=this.chart.series；
const invisibleCount=document.queryselectoral（'.highcharts图例项隐藏'）。长度；
如果（这个可见）{
如果（不可见计数===1）{
//全部隐藏
系列[0]。隐藏（）；
系列[1]。隐藏（）；
系列[2]。隐藏（）；
返回；
}
系列[0]。隐藏（）；
系列[1]。显示（）；
}否则{
如果（不可见计数===2）{
系列[0]。隐藏（）；
系列[2]。显示（）；
返回；
}
系列[0]。显示（）；
系列[1]。隐藏（）；
}
}
}
}]
}
const chart=Highcharts.chart（'container'，选项）；

实例：

---

当我将图表类型更改为

瀑布图

（目标图表类型）时，它没有正确呈现。我为瀑布图添加了一个解决方案另一个问题，可能不在讨论的问题范围内，这个要求对任何瀑布图供应商都是强制性的吗？虽然答案是可以接受的，尽管如此，它的优雅还是值得怀疑的，谢谢你。我不知道你的问题是什么意思。如果你的意思是说，有没有其他的图表库在本地实现了你想要的功能，恐怕我不知道答案。关于优雅-更优雅的解决方案是我提到的第二个-自己打造传奇。这正是我所要求的，谢谢。对不起，我的英语很差。