2

我正在使用股票图表来显示趋势数据。在后端，我得到了 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。

如果您注意到美元符号的前缀没有显示在工资系列上。我不确定我在这里缺少什么。

4

3 回答 3

6

解决方法是将标签格式和值格式分解为不同的部分。请参阅示例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;
    }
};

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

于 2013-09-09T20:32:03.810 回答
0

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

/!\ ：在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 : '');
});

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

于 2015-02-11T14:56:24.177 回答
0

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

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

{{编辑：：

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

于 2013-09-09T18:25:34.503 回答