javascript 我可以为 highchart 工具提示使用两种不同的格式化程序吗？

Can I use two different formatters for highchart tooltips?

提问by Amanda

I have a highcharts table with two data series that use named values. In my tooltips for one series, I want to reference a data point from the series. So the solution in this answer: How to use a different formatter on Highcharts in each curve of the same graphic?doesn't help me. I need more than just tooltipText, I need a formatter:

我有一个 highcharts 表，其中包含两个使用命名值的数据系列。在我的一个系列的工具提示中，我想引用该系列中的一个数据点。所以这个答案中的解决方案：如何在同一图形的每条曲线中的 Highcharts 上使用不同的格式化程序？对我没有帮助。我需要的不仅仅是 tooltipText，我还需要一个格式化程序：

For one:

其中之一：

formatter: function() {
    return this.x + ': ' + this.series.name +
    '<br> $' + Highcharts.numberFormat(this.y, 0);
     }

And for the other:

而对于另一个：

formatter: function() {
    return 'In ' + this.x + ' the median value was' + this.median + 
    'and the total $' + Highcharts.numberFormat(this.y, 0);                        
 }

回答by Ricardo Alvaro Lohmann

Inside formatter thisreffers to the focused serie, you can add an if/elseinside the formatter and return a string for each one, like the following.

内部格式化程序this指的是焦点系列，您可以if/else在格式化程序内部添加一个并为每个格式化程序返回一个字符串，如下所示。

tooltip: {
    shared: false,
    formatter: function() {
        var text = '';
        if(this.series.name == 'MSFT') {
            text = this.x + ': ' + this.series.name +
                   '<br> $' + Highcharts.numberFormat(this.y, 0);
        } else {
            text = 'In ' + this.x + ' the median value was' + this.median +
                   'and the total $' + Highcharts.numberFormat(this.y, 0);
        }
        return text;
    }
}

demo

演示

回答by Martin

You can easily define a toolip formatter for each series - see here: http://api.highcharts.com/highcharts/plotOptions.series.tooltip

您可以轻松地为每个系列定义一个工具栏格式化程序 - 请参见此处：http://api.highcharts.com/highcharts/plotOptions.series.tooltip

{
  tooltip: {
          shared: true
  },
  series: {
     name: 'some series name',
     data: mydata,
     tooltip: {
        valueSuffix: ' bar'
     }
  }
}

Example: http://jsfiddle.net/28qzg5gq/

示例：http: //jsfiddle.net/28qzg5gq/

回答by Kevin Guto

Here's an example. The fiddle example is here:

这是一个例子。小提琴示例在这里：

tooltip: {
            formatter: function () {
                var s = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';

                $.each(this.points, function () {
                    s += '<br/>1 USD = ' + this.y + ' EUR';
                });

                return s;
            }
        },