javascript HighChart 共享工具提示数字格式

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9200901/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 05:55:19  来源:igfitidea点击:

HighChart Shared Tooltip Number Formatting

javascriptjqueryhighchartsnumber-formatting

提问by James Hill

I'm using HighCharts JS for the very first time. So far, I'm very impressed. I'm charting multiples series and using a shared tooltip. The numbers in the shared tooltip are correct, but they are not formatted as I would like. For example, I'm seeing 9876instead of 9,876.

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

I know that I can use the formatter to completely customize the tooltip. Instead of completely redoing the tooltip, I'd just like to format the number and keep the existing look and feel.

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

Question:Is is possible to specify a format for the number(s) in the tooltip without writing a custom formatter?

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

回答by Julian D.

Unfortunately that's not possible, I am afraid: the default tooltip formatters are somewhat hidden inside the Pointand Tooltipobjects and do not provide access to the number formatting.

不幸的是,我担心这是不可能的:默认的工具提示格式化程序有点隐藏在PointTooltip对象中,并且不提供对数字格式的访问。

However, you may want to globally override the default implementation of a Point's tooltipFormatterwith something of your own, e.g.

但是,您可能要覆盖全球的默认实现PointtooltipFormatter与你自己的,如一些

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

This implementation is the same as the default one except for the Highcharts.numberFormatcall on the last line, which will do your number formatting.

除了Highcharts.numberFormat最后一行的调用之外,此实现与默认实现相同,它将执行您的数字格式。

Keep in mind that such a change will apply to all your charts.

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

回答by chandler

Use pointFormatterto format shared tooltip. This is available since version 4.1.0:

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

回答by LeJared

Since 2.2 there is a new option "pointFormat" to specify a separate formater for the pointvalues only: http://api.highcharts.com/highcharts#tooltip.pointFormat

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

回答by Saleem Iqbal

The way to apply Math.round()function inside the highchart script.

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

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
             }
          ]
     }]