Question

我正在尝试开发一个显示自定义＆＃39;文本的图表。我可以设置的工具提示从一点到另一点改变。这是我现在的代码：

            tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
            },

            series: [{
                name: 'Winter 2007-2008',
                data: [
                    [Date.UTC(1970,  9, 27), 0   ],
                    [Date.UTC(1970, 10, 10), 0.6 ],
                    [Date.UTC(1970, 10, 18), 0.7 ],
                    [Date.UTC(1970, 11,  2), 0.8 ],
                    [Date.UTC(1970, 11,  9), 0.6 ],
                    [Date.UTC(1970, 11, 16), 0.6 ],
                    [Date.UTC(1970, 11, 28), 0.67],
                    [Date.UTC(1971,  0,  1), 0.81]
                ]
            }

现在这可以按预期工作，但是我试图添加一些额外的文本，当鼠标悬停在一个点上时会出现在工具提示中。这是我对数据点的理想输入（虽然我不知道是否必须为我的最终产品更改它）。

 [Date.UTC(1970, 10, 18), 0.7 , 'custom tooltip1'],
 [Date.UTC(1970, 10, 18), 0.7 , 'custom tooltip2'],

我希望文本显示在当前工具提示下方的换行符中：

current tooltip

如果您有任何建议或者可以指出我可以找到答案的地方，请告诉我。

谢谢！

Answer 1

将您的数据更改为：

data: [
   {x: Date.UTC(1970, 10, 18), 
    y: 0.7 ,
    customtooltip: 'custom tooltip1'},
   {x: Date.UTC(1970, 10, 18), 
    y: 0.7 ,
    customtooltip: 'custom tooltip2'}
]

然后在这样做一个工具提示格式化函数：

tooltip: {
     formatter: function() {
          var dt = new Date(this.x);
          var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
          var dtstr = dt.getDate()+". "+months[dt.getMonth()];
          var tooltip = '<b>'+this.series.name+'</b><br>'+dtstr+': '+this.y+' m<br>'+this.point.options.customtooltip;
          return tooltip;
     }
}

了解这对您有何帮助。

添加自定义文本工具提示，该工具提示在Highcharts中的点到点不同

1 个答案: