Question

我使用股票图表来显示趋势数据。在后端我得到valueSuffix应该是什么（或视情况而定valuePrefix）。我也在工具提示中格式化日期显示。这是系列宣言的重要部分：

...
           name: 'Wages',
            tooltip: {
                valuePrefix: '$',
                valueDecimals: 0
            },
...

这是工具提示格式化程序：

...
    tooltip: {
        formatter: function () {
            var s = '<b>';
            if (Highcharts.dateFormat('%b', this.x) == 'Jan') {
                s = s + 'Q1';
            }
            if (Highcharts.dateFormat('%b', this.x) == 'Apr') {
                s = s + 'Q2';
            }
            if (Highcharts.dateFormat('%b', this.x) == 'Jul') {
                s = s + 'Q3';
            }
            if (Highcharts.dateFormat('%b', this.x) == 'Oct') {
                s = s + 'Q4';
            }
            s = s + ' ' + Highcharts.dateFormat('%Y', this.x) + '</b>';
            $.each(this.points, function (i, point) {
                s += '<br/><span style="color: ' + point.series.color + '">' + point.series.name + ':</span>' + point.y;
            });
            return s;
        }
    }
...

Example jsFiddle.

如果您发现工资系列中未显示美元符号的前缀。我不确定我在这里缺少什么。

Answer 1

修复方法是将标签格式和值格式分解为不同的部分。请参见示例jsFiddle。

将chart.tooltip设置为：

...
        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            xDateFormat: '%Q'
        },
...

在xAxis上，我将标签格式化程序替换为：

...
format: '{value: %Q}'
...

在系列中我保持后缀/前缀/小数相同：

...
            tooltip: {
                valuePrefix: '$',
                valueDecimals: 0
            },
...

当我发现您可以设置自己的日期格式标签时，发生了重大变化。我为Quarters创建了一个（这是我原来繁琐的代码）：

Highcharts.dateFormats = {
    Q: function (timestamp) {
        var date = new Date(timestamp);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        if (m <= 3) str = "Q1 " + y;
        else if (m <= 6) str = "Q2 " + y;
        else if (m <= 9) str = "Q3 " + y;
        else str = "Q4 " + y;
        return str;
    }
};

我现在得到工具提示以显示正确的标签。

Answer 2

除非最近版本中的内容发生了变化，否则无法在系列对象中设置工具提示选项。您可以设置您在系列级别的plotOptions中设置的任何内容，但不能设置工具提示。

您可以在主工具提示格式化程序中设置检查以检查系列名称，并相应地应用前缀。

{{编辑::

这似乎是格式化程序否定valuePrefix设置的问题。

Answer 3

老问题......但我花了几个小时寻找一种可接受的方法来做到这一点。

/！\：在OP回答之前......

如果有人正在寻找一种方法来使用由highcharts（pointFormat属性）提供的格式化程序（Doc here：LABELS AND STRING FORMATTING），那么你会在这里找到一个（坏）示例：

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/pointformat/

为什么＆＃34;坏＆＃34; ？因为如果你改变了：

pointFormat: '{series.name}: <b>{point.y}</b><br/>',

with：

pointFormat: '{series.name}: <b>{point.y:,.1f}</b><br/>',

你添加千位分隔符（这里没用）和强制数字格式为1位小数...并且松开后缀。

答案是：series.options.tooltip.valueSuffix（或series.options.tooltip.valuePrefix）

示例：

pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y:,.0f}{series.options.tooltip.valueSuffix}</b><br/>',

希望这会为你节省一些时间。

现在OP答案：

根据我的说法，你可以改变：

$.each(this.points, function (i, point) {
   s += '<br/><span style="color: ' + point.series.color + '">' + point.series.name + ':</span>' + point.y;
});

为此：

$.each(this.points, function (i, point) {
    s += '<br/><span style="color: ' + point.series.color + '">' 
      + point.series.name + ':</span>'
      + (typeof point.series.options.tooltip.valuePrefix !== "undefined" ?
            point.series.options.tooltip.valuePrefix : '')
      + point.y
      + (typeof point.series.options.tooltip.valueSuffix !== "undefined" ?
            point.series.options.tooltip.valueSuffix : '');
});

这将添加前缀和/或后缀（如果存在）

股票图表 - 格式化的工具提示和前缀或未显示的后缀

3 个答案:

/！\：在OP回答之前......

现在OP答案：