如何將工具提示標題與 Highcharts 底部的圖例對應？

Question

The 3 labels that I have on the horizontal stacked bar, the data flow for label 1 is different than label 2 and 3. Compare to label 2 and 3, label 1 colors flow is different.

當我 hover 超過 label 1 條時，我看到正確的標題顯示在與底部圖例匹配的工具提示中：

但是，當I Ze0542f579df8e8138ed.69f8f5310bf2z ZD304BA20E96D87411588EEABAC850EBAC850EE34Z 2和3的標准在這個深紅色中，我仍然看到“強烈同意”，而這是87 atripy 87 if the 7 if the 7;

這是可以在higcharts中修復的東西嗎？ 如果是這樣，有人可以幫助我如何修復 label 2 和 3 的工具提示標題嗎？

https://jsfiddle.net/samwhite/a4wtr0zb/

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

我對小提琴做了 2 處改動

1. 更改工具提示

更改以顯示系列名稱而不是引用列表

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

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

結果如下：

對於第一個：

對於第二個：

更新的小提琴在這里：