【问题标题】:Highcharts: Format series names in tooltipHighcharts:在工具提示中格式化系列名称
【发布时间】:2023-04-07 11:36:02
【问题描述】:

我在同一个图表上有多个系列,我想使用工具提示格式化程序使系列名称在工具提示中看起来可读。目前,它们以SeriesonenameSeriestwoname 的形式显示,但我希望它们以Series One NameSeries Two Name 的形式显示。我仍然希望将工具提示保持与Series One Name: 0.567 相同的格式。

我在格式化图表标签时做了类似的事情,我使用了以下代码:

legend: {
  labelFormatter: function () {
    return {
      'Seriesonename': 'Series One Name',
      'Seriestwoname': 'Series Two Name'
    }[this.name];
  }
}

我已经尝试对工具提示格式化程序执行相同的操作,但我似乎无法让它工作。我怀疑这与它是一个共享工具提示有关,但我不是 100% 确定。

任何帮助将不胜感激!

【问题讨论】:

  • 为什么不设置Series 本身的name 属性?
  • @HalvorStrand 我不确定我能做到。我的数据来自另一个来源,我使用 Highcharts 包装器来格式化所有内容,因此我必须使用 labelFormatter 来整理图例中的系列名称。
  • 但是如果你预处理你的数据,你可以在发送任何东西到图表之前做一次,而不是每次你需要显示名字时都做。

标签: javascript highcharts


【解决方案1】:

要对您的legend.labelFormatter 进行类似的工具提示,您可以使用tooltip.formattertooltip.pointFormatter,这在一定程度上取决于您的图表设置方式。

使用tooltip.pointFormatter 的示例可以是 (JSFiddle):

tooltip: {
    pointFormatter: function() {
        var seriesNameConverter = {
            'Seriesonename': 'Series One Name',
            'Seriestwoname': 'Series Two Name'
        };

        return '<span style="color:{point.color}">\u25CF</span> '
            + seriesNameConverter[this.series.name] + ': <b>' + this.y + '</b><br/>';
    }
}

这是tooltip.pointFormat 的默认样式,用您的转换代替系列名称。

【讨论】:

  • 我很确定这正是我所需要的,但它似乎对工具提示没有任何影响 - 也没有任何控制台错误。 tooltip.formatter 确实产生了错误,所以我想我需要使用 pointFormatter
  • 您的意思是在您自己的代码中?因为JSFiddle中显示的效果就是你需要的,对吗?
  • 是的,JSFiddle 正是我想要实现的。我可能遗漏了一些明显的东西。感谢所有的帮助! :)
猜你喜欢
  • 1970-01-01
  • 2014-03-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-01
  • 1970-01-01
相关资源
最近更新 更多