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

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;
    }
};

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