Question

我第一次使用HighCharts JS。到目前为止，我印象非常深刻。我正在制作多个系列并使用共享工具提示。共享工具提示中的数字是正确的，但它们没有按照我的意愿格式化。例如，我看到9876而不是9,876。

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

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

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调用除外，它将进行数字格式化。

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

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/>'; 
    }
}

Answer 3

自2.2以来，有一个新选项“pointFormat”仅为点值指定单独的格式： http://api.highcharts.com/highcharts#tooltip.pointFormat

Answer 4

在高图脚本中应用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
             }
          ]
     }]

HighChart共享工具提示编号格式

4 个答案: