Highcharts共享工具提示需要不同的值、后缀和不同的小数

Question

我有一个高图，上面画着温度，风，压力和降雨量。

可以在这里看到http://www.dmjsystems.co.uk/weather/forecast.php

我使用了一个共享的工具提示，增加了复杂性，最大雨量是最小和最大的总和在堆叠列的雨。目前，代码忽略了我的基于序列的后缀，我还不能让单个小数工作(即他们都显示3位小数)。

每个项目都有不同的后缀(温度=(度符号)C，风= mph，压力= mb和雨= in)和不同的小数位数(风= none，温度= 1，压力= 1和雨= 3)。

我目前使用的是一个通用的工具提示代码如下:

    tooltip: { shared : true,
            formatter: function() {
            return '<span style="color:#039;font-weight:bold">' + Highcharts.dateFormat('%A' + ', ' + '%b %d' + ', ' + '%H' + ':' + '00',this.x) + '</span><br/>' +
                       this.points.map(function(point, idx) {
                           return '<span style="color:' + point.series.color + '">' + point.series.name +
                                  '</span>: <span style="color:#669;font-weight:bold">' +
                                  Highcharts.numberFormat((idx == 0) ? point.total : point.y,3) +
                                  '</span>';
                       }).join('<br/>');
            }
    },

，但我认为我需要移动这个(除了共享:true)到基于系列的工具提示使用pointFormat(特别是tooltip。ySuffix(我认为它可以让我正确指定后缀)和valueDecimals来设置每个序列的小数点，但是我找不到使用这些函数的任何代码示例。

而且，一旦我离开了一般的工具提示，我就不能让总和为堆叠的列工作。

如果有人能给我指指方向，我会很感激的。

Answer 1

您可以简单地为每个系列添加工具提示选项。
您可以在下面的链接中看到这些选项。
这样你就不需要格式化每个系列的点了。

series: [{
    name: 'USD',
    data: yourData,
    tooltip: {
        ySuffix: ' USD',
        yDecimals: 4
    }
}, {
    name: 'EUR',
    data: yourData,
    tooltip: {
        yPrefix: 'EUR ',
        yDecimals: 1
    }
}]

参考:

• Highcharts提示

Answer 2

可以使用共享的工具提示并设置前缀，后缀等。你只需要考虑一下措辞。而不是使用yprefix等，你使用valuePrefix

为数据

中的每个系列设置

series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        type: 'column'
    }, {
        data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
        tooltip: {
    valuePrefix: ' USD'
}}],

你可以在这里看到一个提琴显示它

Answer 3

您可以为图表的工具提示指定一个自定义格式化器，然后在系列工具提示中指定一个值后缀和任何其他选项，然后在图表的工具提示格式化器函数中引用这些选项。例如:

$('XXXX').highcharts({
	...
	tooltip: {
                formatter: function() {
                    var text = "";
                    $.each(this.points, function(index) {
                        text += '<br/><b>' + this.series.name + ":</b> "+ this.y+" "+this.series.tooltipOptions.valueSuffix;
                    });
                    return text;
                },
                shared: true
            },
	...
});
...
chart.addSeries({
            ...
            tooltip: {
                valueSuffix: ' '+seriesUnit,
                valueDecimals:2
            },
            ...
        });