javascript 当鼠标悬停在列栏上时，工具提示不会为highchart中的多个列显示不同的颜色

nle07wnf 于 2023-06-04 发布在 Java

关注(0)|答案(2)|浏览(501)

将鼠标悬停在列栏上时，工具提示应显示两种颜色，分别为OKR for the year和Year to date，但显示的颜色相同。我正在使用这个脚本。

tooltip: { 
                formatter: function() {  
                      
                    let xAxisValue = this.point.name;  
                    let yAxisValue = this.y;
                    let xAxisName = this.series.name;
                    
                    if(hasMultipleCols){
 
                        if(typeof chartArrayData[1] != 'undefined') {
 
                            yAxisValue =  chartArrayData[1].data[this.point.index]; // this.point.name == undefined ? this.point.y : this.point.name
                            xAxisValue =  chartArrayData[0].data[this.point.index];
                            xAxisName  =  chartArrayData[0].name;
                            yAxisName =   chartArrayData[1].name;
                        }
                         
                     }
                     return `<span style="color:${this.color}">●</span> ${yAxisName }: <b>${ yAxisValue}</b><br/><span style="color:${this.color}">●</span> ${xAxisName}: <b>${xAxisValue }</b>`;
                     
                },  
            }

请附件

请引导我。
谢谢

JavaScript

来源：https://stackoverflow.com/questions/76387456/when-hover-on-column-bar-the-tooltip-is-not-showing-different-colors-for-multipl

2条答案

按热度按时间

u1ehiz5o1#

最简单的方法是启用工具提示的shared选项：

tooltip: {
  shared: true
}

但是，如果您想保留自定义格式，可以使用以下格式化程序函数：

tooltip: {
    formatter: function() {
      const options = this;
      const allSeries = options.series.chart.series;
      let result = `<span style="color:${this.color}">●</span> ${options.series.name}: <b>${options.y}</b>`;

      allSeries.forEach(series => {
        if (series !== options.series) {
          const point = series.points.find(p => p.x === options.point.x);

          if (point) {
            result += `<br/><span style="color:${series.color}">●</span> ${series.name}: <b>${point.y}</b>`;
          }
        }
      });

      return result;
    }
  }

现场演示：http://jsfiddle.net/BlackLabel/tf6jc5op/
API引用：

https://api.highcharts.com/highcharts/tooltip.formatter
https://api.highcharts.com/highcharts/tooltip.shared

赞(0）回复(0）举报 2023-06-04

nimxete22#

将颜色更改为静态变量，如果颜色仍然与bar相同，也许您应该检查colorByPoint属性。如果是true，工具提示的颜色将设置为点的颜色。

两个this.color目标指向同一点，因此将第二个更改为另一个颜色。

方案一：添加一个shared: true属性，实现条间信息共享。
像这样👇

tooltip: {
    formatter: function () {
    // something your code here.
      let secondColor = this.points && this.points.length > 1 ? this.points[1].color : this.color;
      return `<span style="color:${this.color}">●</span> yAxisName1: <b>yAxisName12</b><br/><span style="color:${secondColor}">●</span> xAxisName1: <b>xAxisName2</b>`
    },
    shared: true
  },

方案2：通过以下方式获得颜色：
this.point.series.xAxis.series[1].color

赞(0）回复(0）举报 2023-06-04

我来回答

javascript 当鼠标悬停在列栏上时，工具提示不会为highchart中的多个列显示不同的颜色

2条答案

相关问题

热门标签

最新问答