Highcharts 5自定義css類的工具提示顏色

我在樣式模式下使用Highcharts 5。Highcharts 5自定義css類的工具提示顏色

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

該定義的jsfiddle CSS類着色的數據系列的紅色，但是這個類的名字沒有出現下降懸停在點時傳播到提示。

是否有指定工具提示的類名？我已經通過文檔掃描，但我找不到處理這個問題的正確方法。

來源

2017-03-22 Franzl

@Franzi你想顯示紅色的提示數據？ –

是的，這是正確的。 – Franzl

@Franzi這是你需要的嗎？ https://jsfiddle.net/sarojsasmal/va8cz88o/1/ –

在樣式模式下，該系列的className未應用於工具提示。您需要使用類似.highcharts-tooltip or highcharts-color-{n}的類別單獨進行設計。

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

上有關於該行爲Highchats GitHub的開放式票 - https://github.com/highcharts/highcharts/issues/6448

來源

2017-03-23 12:47:17 morganfree

謝謝。我同意github上的最初海報。在工具提示中不包括類名似乎否定了系列中的類名的全部用途。總之，我不妨用highcharts-color- {n}來設計這個系列。 – Franzl

您可以通過'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] 
     }] 
    });

希望它有幫助！

來源

2017-03-22 13:59:06

Highcharts 5自定義css類的工具提示顏色

回答

相關問題