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

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 属性）（此处的文档：LABELS AND STRING FORMATTING），您会在这里找到一个（不好的）示例：

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

为什么是“坏”？因为如果你改变：

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

与：

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 : '');
});

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