Question

我想在Highstock中设置不同的工具提示（不仅仅是内容的样式，而是工具提示本身的样式。例如，不同的填充，阴影，边框辐射等）当悬停在旗帜系列和线系列上时。但是，看起来需要在工具提示配置对象中配置这些属性。不确定它是否可以动态更改。

喜欢这个jsbin： http://jsbin.com/cixowuloxa/1/edit?js,output

什么是给夏天到来的更好方式＆＃39;工具提示与其他共享工具提示的风格不同？

Answer 1

你的方法是正确的。在格式化程序中，回调包装html标记中的文本，并使用css，内联或类名称对其进行样式设置，具体取决于它是标记还是行系列。确保将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/

有条件地自定义Highstock工具提示

1 个答案: