Question

我使用HighCharts.js创建了一个条形图。以下是我的声明：

var myChart = Highcharts.chart(id, {
    chart: {
        type: 'column'
    },
    title: {
        text: ''
    },       
    xAxis: {
        categories: x,
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Amount (Php)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat:'<tr>' +
                        '<td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y}</b></td>' +
                    '</tr>',                        
        footerFormat:'</table>',
        shared: true,
        useHTML: true
    },
    plotOptions:{
        column:{
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: data        
});

见下图：

我希望工具提示中的Point值格式如下：

Apr
Collections: 7,903,113.53
Disbursements: 218,257,774.81

我尝试将声明中的pointFormat属性更改为以下代码：

 pointFormat:'<tr>' +
                        '<td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y.formatMoney(2, ".", ",")}</b></td>' +
                    '</tr>',

在我的java脚本中，我创建了一个函数：

Number.prototype.formatMoney = function(c, d, t){
    var n = this, 
    c = isNaN(c = Math.abs(c)) ? 2 : c, 
    d = d == undefined ? "." : d, 
    t = t == undefined ? "," : t, 
    s = n < 0 ? "-" : "", 
    i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))), 
    j = (j = i.length) > 3 ? j % 3 : 0;
    return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};

但是引发了一个错误：

highcharts.js?Z:20 Uncaught TypeError: Cannot read property '", ",")' of undefined

有没有简单/其他方式来实现我想要的东西？这是我的jsfiddle。

Answer 1

不使用pointFormat，而是使用pointFormatter回调 pointFormatter: function() { return '<tr>' + '<td style="color:' + this.series.color + ';padding:0">' + this.series.name + ': </td>' + '<td style="padding:0"><b>' + this.y.formatMoney(2, '.', ',') + '</b></td>' + '</tr>'; },

示例：https://jsfiddle.net/w64runoo/11/

此外，污染Number.prototype并不是一种干净的方法。你可以查看Highcharts＆＃39; numberFormat回调并使用您的函数扩展它。 http://api.highcharts.com/highcharts/Highcharts.numberFormat

还检查全局lang选项，您可以在其中定义thousandStep和decimalPoint http://api.highcharts.com/highcharts/lang.thousandsSep

Highcharts条形图的工具提示点格式

1 个答案: