有条件地自定义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工具提示

回答

相关问题