HighChart 共享提示框数字格式化

Question

我第一次使用HighCharts JS，迄今为止，我非常满意。 我正在制作多个系列的图表，并使用共享工具提示。 共享工具提示中的数字是正确的，但它们的格式不符合我的要求。 例如，我看到的是9876而不是9,876。

我知道可以使用格式化程序完全自定义工具提示。但是我只想格式化数字并保留现有的外观和感觉，而不是完全重做工具提示。

问题：是否可以指定工具提示中的数字格式而无需编写自定义格式化程序？

- James Hill

Answer 1

很遗憾，我怕这是不可能的：默认的工具提示格式化程序有点隐藏在Point和Tooltip对象中，并且没有提供访问数字格式化的方式。

但是，您可以全局覆盖Point的默认实现的tooltipFormatter，使用自己的内容，例如：

Highcharts.Point.prototype.tooltipFormatter = function (useHeader) {
    var point = this, series = point.series;
    return ['<span style="color:' + series.color + '">', (point.name || series.name), '</span>: ',
        (!useHeader ? ('<b>x = ' + (point.name || point.x) + ',</b> ') : ''),
        '<b>', (!useHeader ? 'y = ' : ''), Highcharts.numberFormat(point.y, 0), '</b>'].join('');
};

除了最后一行的Highcharts.numberFormat调用会对您的数字进行格式化，此实现与默认实现相同。

请记住，这样的更改将适用于您所有的图表。

- Julian D.

---

我讨厌别人在评论中问跟进问题。但是，我还是要问：有没有办法将文本右对齐，以便如果系列名称长度不同，文本仍然看起来整齐和对齐？ - James Hill

默认情况下，工具提示标签被呈现为SVG，并且只允许非常少的格式样式选项，不幸的是似乎没有与对齐相关的内容（文档说“仅处理与SVG共享的文本相关CSS”）。实际上，可以将useHTML：true设置为图表工具提示的选项，并将上面代码中最后一行的<b>标签替换为类似于<b style="position: absolute; right: 0">的内容，但是在使用HTML时似乎存在一些令人讨厌的渲染问题（标签框未始终正确调整大小）。需要进一步调查... - Julian D.

来晚了，需要一些对答案的理解和为什么它是必要的。Highcharts在其配置本地化选项下有一个可配置的thousandsSep属性，默认为逗号分隔符（,）- 对我来说，这更暗示了默认数字字符串呈现方式（无论上下文和包含标记）将使用逗号分隔千位数，但事实并非如此。为什么这与问题无关？ - Barney

Answer 2

使用pointFormatter来格式化共享提示信息。这个功能从版本4.1.0开始提供：

tooltip: {
    shared: true,
    pointFormatter: function() { 
        return '<span style="color:' + this.series.color + ';">●</span> ' + this.series.name + ': <b>' + numberFormat(this.y) + '</b><br/>'; 
    }
}

- chandler

---

请在您的答案中添加一些解释。 - Alex Char

这个答案 完全 就是我一直在寻找的！非常感谢！ - dsaves

Answer 3

从2.2版本开始，有一个新选项“pointFormat”，可以为点值指定单独的格式化程序： http://api.highcharts.com/highcharts#tooltip.pointFormat

- LeJared

Answer 4

在 highchart 脚本中应用 Math.round() 函数的方法。

series: [{
    type: 'pie',
    name: 'CPU (GHz)',
    data: [
            ['Used',Math.round( <?php echo $gSum_Allocated_CPU; ?>, 2)],
            {
                name: 'Available',
                y:Math.round(<?php echo $gSum_Available_CPU; ?>, 2),
                sliced: true,
                selected: true
             }
          ]
     }]

- Saleem Iqbal