【问题标题】:With HighCharts, how can I have the same tooltip formatter as my y axis使用 HighCharts,我怎样才能拥有与我的 y 轴相同的工具提示格式化程序
【发布时间】:2018-09-12 20:26:25
【问题描述】:

借助 HighCharts,我的工具提示格式化程序是否可以使用选定的 y 轴格式化程序?在这个 jsfiddle 中,我添加了一个 y 轴格式化程序(除以千),但工具提示内容保持未格式化。

编辑:我有一个动态数量的 y 轴和系列。

.highcharts({
    tooltip: {
      borderWidth: 1,
      borderColor: '#AAA',
      formatter: function(e){
         // do some magic here
      }
    },
    yAxis: [
        {
      id: 'score',
        min: 0,
        max: 10000,
        title: 'Score',
        labels: {
            formatter: function(e){
            return e.value/1000 + 'k';
          }
        }
      }
    ],
    series: [{
        type: 'spline',
        name: 'Laurel',
        data: [1000,2000,3000,8000,5000],
        yAxis: 'score'
    },
    {
        type: 'spline',
        name: 'Yanni',
        data: [3000,7000,3000,2000,1000],
        yAxis: 'score'
    }]
});

【问题讨论】:

  • 如果您只想使用格式化程序格式化工具提示,@Core972 已经发布了答案。如果您的问题是您是否可以为标签和工具提示重用或使用相同的格式化程序,那么答案是否定的。您只能将实际值传递给对其执行相同操作的函数。
  • 好吧,我并没有完全说清楚。我可能有多个 y 轴,每个都有不同的格式化程序 - 公里和分钟绘制在同一张图表上。从工具提示格式化程序中,我知道该系列的名称。也许可以在那里做一些黑客攻击......
  • 那么你有一些选择。您可以在每个系列中包含一个自定义标志,并根据自定义标志格式化工具提示/轴。当然,您也可以按名称进行匹配。或者,您也可以为每个系列设置工具提示格式化程序(并制作可用于许多系列的函数),API:api.highcharts.com/highcharts/…
  • 我用多个yAxis编辑了我的答案
  • 我设法找到了一个好的解决方案。将格式化功能也放在系列上,可以在 //this.series.options - jsfiddle.net/p6591xj3/17 上找到

标签: highcharts


【解决方案1】:

你必须像这样设置tooltip formatterApi

tooltip:{
  ...
  formatter: function(){
    var text = '';
    if(this.series.index == 0) {
        text = this.series.name + ' : ' + this.y/1000 + 'k';
    } else {
        text = '<b>' + this.series.name + '</b> : ' + this.y ;
    }
    return text;
  }
}

Fiddle

编辑多个 yAxis

【讨论】:

  • 一个 y 轴可以,但我可能有几个。有什么方法可以使用实际的 y 轴格式化程序?
猜你喜欢
  • 2015-09-26
  • 1970-01-01
  • 2010-09-25
  • 1970-01-01
  • 1970-01-01
  • 2011-01-07
  • 2015-08-07
  • 2014-12-31
  • 2013-02-14
相关资源
最近更新 更多