6

我有一个绘制温度、风、压力和降雨量的 Highchart 图表。

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

我正在使用一个共享的工具提示，其中增加了最大雨量是堆叠列中最小和最大雨量的总和。目前，代码忽略了我的基于系列的后缀，我无法让单个小数起作用（即它们都显示 3 个小数位）。

每个项目都有不同的后缀（Temp =（度数符号）C、Wind = mph、Pressure = mb 和 Rain = in）和不同的小数位数（Wind = none、Temp = 1、Pressure = 1 和 Rain = 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/>');
            }
    },

但我认为我需要将此（除了 shared : true 之外）移动到使用 pointFormat （尤其是 tooltip.ySuffix ，我认为它可以让我正确指定后缀）和 valueDecimals 为每个系列设置小数点的基于系列的工具提示，但是我找不到任何代码示例来使用这些功能。

此外，一旦我离开一般工具提示，我就无法让堆叠列的总计工作。

如果有人能指出我正确的方向，我将不胜感激。

4

3 回答 3

6

您可以简单地为每个系列添加工具提示选项。
您可以在以下链接中查看选项。
这样您就不必格式化每个系列的点。

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

演示

参考：

于 2013-03-20T03:21:39.943 回答
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'
}}],

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

于 2013-11-06T12:50:28.853 回答
2

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

$('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
            },
            ...
        });

于 2014-10-28T15:15:33.977 回答