Question

如何将工具提示颜色设置为与高图版本5中的条形颜色相同？

我使用了下面的代码，但只有工具提示的边框颜色似乎正在改变

  tooltip: {
                    backgroundColor: null,
                    borderWidth: 1,
                    borderColor: null,
                    formatter: function(){

                        return '<div style="background-color:'+ this.series.color +'!important; font-weight:bold;color:#fff" class="tooltip"> ' + this.y + '</div>';
                    },

                  },

请注意，上述代码适用于Highcharts 4，但不适用于版本5

Answer 1

您在工具提示选项中缺少useHTML: true,

    tooltip: {
        valueSuffix: ' millions',
        useHTML: true,
        backgroundColor: null,
        borderWidth: 1,
        borderColor: null,
        formatter: function(){
            return '<div style="background-color:'+ this.series.color +'!important; font-weight:bold;color:#fff" class="tooltip"> ' + this.y + '</div>';
        }
    },

Fiddle演示

<强>更新

使用Tooltip.prototype.refresh将其添加到现有代码

  const H = Highcharts;

  H.wrap(H.Tooltip.prototype, 'refresh', function (p, point, mouseEvents) {
    p.call(this, point, mouseEvents);

        const label = this.label;

        if (point && label) {
          label.attr({
            fill: point.series.color
          });
        }
      });

Updated Fiddle

根据条形颜色更改highcharts工具提示颜色

1 个答案: