有條件地自定義Highstock工具提示

我想在Highstock樣式中使用不同的工具提示（不僅僅是內容樣式，而是工具提示本身的樣式，例如不同的填充，陰影，邊框等等）當懸停在旗幟系列和線條系列上時。但是，看起來這些屬性需要在工具提示配置對象中進行配置。不知道它是否可以動態更改。有條件地自定義Highstock工具提示

如在此jsbin： http://jsbin.com/cixowuloxa/1/edit?js,output

有什麼更好的辦法讓「一到夏天」工具提示風格不同於其他共享工具提示？

來源

2016-11-06 ychi chen

將鼠標懸停及移出事件是在這種情況下有幫助嗎？看到這裏的例子： http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-mouseover/ –

@NavjotSingh你的意思是在mouseOver回調中動態添加一個工具提示嗎？我認爲這也需要你獲得光標的位置並將div放到相應的位置？ –

是的。其中一種方法是找到'Summer'div元素的位置並在其旁邊顯示一個自定義div元素。 –

你的方法是正確的。在格式化程序回調中，將文本包裝在html標記中，並使用css，inline或class名稱對其進行樣式設置，具體取決於標記或行系列。確保將useHTML設置爲true。

tooltip: { 
     useHTML:true, 
     borderWidth: 0, 
     headerFormat: '', 
     shared: true, 
     formatter: function(){ 
      if (!!this.points) { 
      return this.points 
      .reduce(
      function(prev, cur) { 
      return prev + 
       '<br>' + cur.series.name + ': '+ cur.y; 
      }, ''); 
      } 
      return "<div style='border:5px solid black; padding: 20px'>Summer arrives!</div>"; 
     }, 
     padding: 0 
     }

例如：https://jsfiddle.net/hpeq7Lbe/1/

其實，你可以設置標誌的併線的提示，但不是所有的選項都支持，例如不同的選擇填充或邊框寬度將不起作用 - 它們必須在工具提示的全局選項中設置。

plotOptions: { 
     line: { 
     tooltip: { 
      pointFormat: 'line', 
      borderWidth: 10, // not supported 
      padding: 10 // not supported 
     } 
     }, 
     flags: { 
     tooltip: { 
      pointFormat: 'flags', 
      borderWidth: 1, //not supported 
      padding: 1 // not supported 
     } 
     } 
    }

例如：https://jsfiddle.net/hpeq7Lbe/3/

來源

2016-11-07 13:03:30 morganfree

有條件地自定義Highstock工具提示

回答

相關問題