HighCharts 共享工具提示数字格式答案

【问题标题】：HighChart Shared Tooltip Number FormattingHighCharts 共享工具提示数字格式
【发布时间】：2012-03-01 08:03:23
【问题描述】：

我是第一次使用 HighCharts JS。到目前为止，我印象非常深刻。我正在绘制倍数系列并使用共享工具提示。共享工具提示中的数字是正确的，但它们的格式不是我想要的。例如，我看到的是 9876 而不是 9,876。

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

问题：是否可以在不编写自定义格式化程序的情况下为工具提示中的数字指定格式？

【问题讨论】：

标签： javascript jquery highcharts number-formatting

【解决方案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 调用之外，此实现与默认实现相同，它将对您的数字进行格式化。

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

【讨论】：

这正是我想要的！
我讨厌人们在 cmets 中提出后续问题。但是，我来了：有什么方法可以使文本正确对齐，这样如果系列名称的长度不同，文本仍然看起来整齐且对齐？
默认情况下，工具提示标签呈现为 SVG，并且只允许很少的格式样式选项，不幸的是，它看起来与对齐无关（文档说 只有与 SVG 共享的与文本相关的 CSS处理）。事实上，可以将useHTML: true 设置为图表工具提示的选项并替换例如上面代码最后一行的<b> 标记类似于<b style="position: absolute; right: 0">，但是在使用HTML 时似乎存在一些令人讨厌的呈现问题（标签框的大小并不总是正确调整）。需要进一步调查...
迟到了，呼吁对答案的必要性和原因有所了解。 Highcharts 在其配置本地化选项下有一个可配置的thousandsSep 属性，它的默认值是逗号分隔符 (,) — 对我来说，这不仅仅意味着默认数字字符串表示（无论上下文和包含标记）将有数千个分隔符用逗号，但事实并非如此。为什么这与问题无关？

【解决方案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/>'; 
    }
}

【讨论】：

请为您的答案添加一些解释。
这个答案正是我一直在寻找的！非常感谢！

【解决方案3】：

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

【讨论】：

【解决方案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
             }
          ]
     }]

【讨论】：