在Highcharts中格式化工具提示编号

And*_*rle 13 javascript highcharts

我用它tooltip.pointFormat来在工具提示中渲染其他数据.不幸的是,只有point.x千位分隔符正确格式化.

的jsfiddle

$(function () {
  Highcharts.setOptions({
    global: {
      useUTC: false,
    },
    lang: {
      decimalPoint: ',',
      thousandsSep: '.'
    }
  });
  $('#container').highcharts({
    xAxis: {
      type: 'datetime'
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count}</b><br/>',
      shared: true
    },
    series: [{
      data: [{
        y: 20009.9,
        count: 20009.9
      }, {
        y: 10009.9,
        count: 20009.9
      }, {
        y: 40009.9,
        count: 20009.9
      }],
      pointStart: Date.UTC(2010, 0, 1),
      pointInterval: 3600 * 1000 // one hour
    }]
  });
});
Run Code Online (Sandbox Code Playgroud)

And*_*rle 21

这里找到答案.

数字使用C库函数sprintf中的浮点格式约定的子集进行格式化.格式化附加在变量括号内,用冒号分隔.例如:

  • 小数点后两位:" {point.y:.2f}"
  • 千位分隔符,没有小数位: {point.y:,.0f}
  • 千位分隔符,小数点后一位: {point.y:,.1f}

因此:,.1f,在括号内使用将正确格式化数字.

tooltip: {
  pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count:,.1f}</b><br/>',
  shared: true
}
Run Code Online (Sandbox Code Playgroud)

的jsfiddle

  • 请注意,这只适用于我,如果我在jsFiddle中指定了Highcharts lang decimalPoint和thousandsSep值. (3认同)

Seb*_*han 14

在InstFored of pointFormat中,使用工具提示格式化程序,然后使用Highcharts.numberFormat

tooltip: {
            formatter:function(){

                return this.point.series.name + ': <b>' + Highcharts.numberFormat(this.point.options.count,1,',','.') + '</b><br/>' + 'Count: <b>'+Highcharts.numberFormat(this.point.y,1,',','.')+'</b><br/>';
            }
        },
Run Code Online (Sandbox Code Playgroud)

示例:http://jsfiddle.net/8rx1ehjk/4/