如何将工具提示标题与 Highcharts 底部的图例对应起来？

Question

我在水平堆积条上有 3 个标签，标签 1 的数据流与标签 2 和 3 不同。与标签 2 和 3 相比，标签 1 的颜色流不同。

当我将鼠标悬停在标签 1 栏上时，我看到工具提示中显示了与底部图例匹配的正确标题：

但是，当我将鼠标悬停在深红色的标签 2 和 3 的栏上时，我仍然在工具提示中看到“强烈同意”，而如果按照底部的图例：

这是可以在高图表中修复的东西吗？如果是这样，有人可以帮我解决标签 2 和 3 的工具提示标题吗？

let chart = Highcharts.chart('container1_1', {
      chart: {
        type: 'bar',
        height: 300
      },
      credits: { 
        enabled: false 
      },
      yAxis: {
        title: { text: 'Response Rate' },
        max: 100,
        maxPadding: 0,
        labels: {
          format: '{value}%'
        },
        gridLineWidth: 0,
        minorGridLineWidth: 0
      },
      tooltip: {
        formatter: function () {
          return '<b>'+ tooltip_titles[0][this.series.index] + '</b><br/>' + 'Response Rate: ' + (100*this.point.y).toFixed(2) + '\%';
        }
      },
      plotOptions: {
        series: {
          stacking: 'percent',
          pointWidth: 20,
          borderWidth: 0,
        },
        bar: {
        states: {
                inactive: {
                    enabled: true
                },
                hover: {
                                    opacity: .9
        }
            }
        }
      },
      legend: {
        reversed: true,
        align: 'right'
      },
      title: {
        align: 'left',
        text: 'Progress on Diversity, Inclusion, and Opportunity in our Workplace',
        style: {
          fontSize: '20px',
          fontWeight: 'bold',
        }
      },
      xAxis: {
        categories: labels,
        labels: {
          style: {
            fontSize: '1em',
            color: '#000',
            width: 370,
            float: 'left'
          }
        }
      },
      series: [{
        name: 'Strongly Agree',
        color: colors[4],
        data: []
      }, {
        name: 'Agree',
        color: colors[3],
        data: []
      }, {
        name: 'Neither Agree nor Disagree',
        color: colors[2],
        data: []
      }, {
        name: 'Disagree',
        color: colors[1],
        data: []
      }, {
        name: 'Strongly Disagree',
        color:   colors[0],
        data: []
      }]
    });

Answer 1

我对 fiddle

进行了 2 处更改

更改工具提示

改为显示系列名称而不是引用列表

formatter: function () {
          return '<b>'+ this.series.name + '</b><br/>' + 'Response Rate: ' + (100*this.point.y).toFixed(2) + '\%';
        }

更改 setData()

从 setData 中删除所有“颜色”以确保跨类别的一致性。

series.setData([
              {
                name: tooltip_titles[s],
                //color: colors[s],
                      y: dept_data["102"][4-s]
              },
              {
                name: tooltip_titles[s],
                // color: colors[Math.abs(s - 4)],
                      y: dept_data["104"][4-s]
              },
              {
                name: tooltip_titles[s],
                // color: colors[Math.abs(s - 4)],
                      y: dept_data["105"][4-s]
              }]);

结果如下：

对于第一个：

第二个：

更新后的 fiddle 为 here:

如何将工具提示标题与 Highcharts 底部的图例对应起来？

How to correspond tooltip title with the legends at the bottom in Highcharts?

javascript

jquery

tooltip

highcharts