Highcharts 5工具提示颜色与自定义css类

Question

我在样式模式下使用Highcharts 5。

https://jsfiddle.net/franzl/va8cz88o/

series: [{
    className: "graph-red",
    data: [43934, 52503, 57177, 69658, 97031]
}]

jsfiddle定义了一个用于将数据系列着色为红色的CSS类，但是当将鼠标悬停在这些点上时，此类名称似乎不会传播到工具提示。

无论如何都要指定工具提示的类名吗？我已经扫描了文档，但我找不到正确的方法来处理这个问题。

Answer 1

在样式模式中，系列的className不会应用于工具提示。您需要使用像.highcharts-tooltip or highcharts-color-{n}这样的类来单独设置样式。

例如：https://jsfiddle.net/xo05ov2f/

Highchats github上有关于这种行为的开放票 - https://github.com/highcharts/highcharts/issues/6448

Answer 2

您可以通过'formatter'功能格式化工具提示内容。

 Highcharts.chart('container', {
    tooltip: {
      borderColor: '#FFFFFF',
      backgroundColor: '#FFFFFF',
      borderWidth: 0,           
      useHTML: true,
      formatter: function(){
          var content = '';
          content += '<span style="color:red;padding-right:10px;">' + 
                     '<span style="padding-right: 5px;color:' +                                                            
                      this.series.color + '">'+ '\u25CF</span>' +
                      this.series.name + ':  ' +   
                     '<span style="color:red;">' +  this.y  + '</b>' + '</span>';
                   return content;
               }
        }, 
    series: [{
             className: "graph-red",
             data: [43934, 52503, 57177, 69658, 97031]
         }]
   });

希望能帮助到你 ！！

Answer 3

你认为className不适用于工具提示你是正确的，至少在2019年4月。

虽然使用工具提示和pointFormat的series.options.className属性，但有一种造型点的方法。尝试：

tooltip : {
    pointFormat: '<span class="{series.options.className}">\u25CF</span> {series.name}: {point.y}<br/>'
}

这增加了className的意义 - 在样式模式中它将与该类给出的其他东西颜色相同。

示例：https://jsfiddle.net/philipnye/qrj4p1hn/4

据我所知，不可能使用相同的技术来设置工具提示边框颜色。因此，您可能只想将工具提示边框设置为与工具提示的背景颜色相同的颜色。例如。 （假设背景颜色是默认颜色）：

.highcharts-tooltip {
    stroke: #f7f7f7;
}

h / t @morganfree链接到open GitHub ticket about this，其中一个Highcharts团队建议使用pointFormat这种方式。