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

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

示例jsFiddle.

如果您注意到美元符号的前缀未在Wage系列中显示.我不确定我在这里缺少什么.

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

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