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图表绘制的图表中显示x轴上的数字，没有小数，.作为千位分隔符。

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

所以3200应显示为3.200

我已经尝试过format变量：

#.#
#.###
#

Answer 1

因为format选项在这种情况下不起作用，您可以为ticks ...

提供自己的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>

格式号用。作为千位分隔符，没有小数

1 个答案: