charts - 用 格式化数字。作为千位分隔符并且没有小数

Question

我已经在这里检查过:
https://groups.google.com/forum/#!topic/google-visualization-api/4qCeUgE-OmU
https://developers.google.com/chart/interactive/docs/querylanguage#Format
https://developers.google.com/chart/interactive/docs/reference#numberformatter

我想在使用 Google Charts 绘制的图表中显示 x 轴上的数字，不带小数，并使用 . 作为千位分隔符。

var options = {
    hAxis: {
        title: 'Month'
    },
    vAxis: {
        title: 'Price (€)', format: '#.###'
    }
};

因此 3200 应显示为 3.200

我已经尝试过 format 变量:

#.#
#.###
#

Answer 1

由于format选项在这种情况下不起作用，
您可以为 vAxis 提供自己的刻度...

为每个刻度使用对象符号

{
   v: value,
   f: formattedValue
}

使用谷歌的NumberFormat class ...

var formatNumber = new google.visualization.NumberFormat({
  fractionDigits: 0,
  groupingSymbol: '.'
});

使用formatValue方法格式化每个刻度

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'y');
    data.addRows([
      [1, 3000],
      [2, 3100],
      [3, 3200],
      [4, 3300],
      [5, 3400],
    ]);

    var formatNumber = new google.visualization.NumberFormat({
      fractionDigits: 0,
      groupingSymbol: '.'
    });

    var columnRange = data.getColumnRange(1);
    var ticks = [];
    for (var i = columnRange.min; i <= columnRange.max; i=i+100) {
      ticks.push({
        v: i,
        f: formatNumber.formatValue(i)
      });
    }

    var options = {
      hAxis: {
        title: 'Month'
      },
      vAxis: {
        ticks: ticks,
        title: 'Price (€)'
      }
    };

    var container = document.getElementById('chart');
    var chart = new google.visualization.LineChart(container);
    chart.draw(data, options);
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>