Question

我想更改轴上的值的格式，如下所示：

意思是，我想将默认分组符号更改为空格（＆＃39;＆＃39;）。到目前为止，我尝试了不同的方法，但没有一个工作。即使documentation也无法帮助我。任何人吗？

重要：

我想更改轴上值的格式，而不是内部值。
我不想更改Google图表的语言。

Answer 1

使用选项 - ＆gt; ticks - 为任一轴提供自定义标签

hAxis或vAxis

使用对象表示法，同时提供值v:和格式化值f:

    hAxis: {
      ticks: [
        {v: 0, f: '1'},
        {v: 1, f: '100'},
        {v: 2, f: '1 000'},
        {v: 3, f: '10 000'},
        {v: 4, f: '100 000'},
        {v: 5, f: '1 000 000'}
      ]
    },

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [0, 0],
    [1, 1],
    [2, 2],
    [3, 3],
    [4, 4],
    [5, 5],
    [6, 6]
  ]);
  var options = {
    hAxis: {
      ticks: [
        {v: 0, f: '1'},
        {v: 1, f: '100'},
        {v: 2, f: '1 000'},
        {v: 3, f: '10 000'},
        {v: 4, f: '100 000'},
        {v: 5, f: '1 000 000'}
      ]
    },
    vAxis: {
      ticks: [
        {v: 0, f: '1'},
        {v: 1, f: '100'},
        {v: 2, f: '1 000'},
        {v: 3, f: '10 000'},
        {v: 4, f: '100 000'},
        {v: 5, f: '1 000 000'}
      ]
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, options);
}

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

编辑

您可以使用数字格式器来创建数字模式

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

格式化数据表以查看工具提示上的格式

// format tooltips
formatLabel.format(data, 1);

仍然需要创建自定义标签才能在轴上看到

// create axis labels
var axisTicks = [];
var axisRange = data.getColumnRange(1);
for (var i = axisRange.min; i <= axisRange.max; i=i+1000) {
  axisTicks.push({
    v: i,
    f: formatLabel.formatValue(i)
  });
}

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [0, 1000],
    [1, 2000],
    [2, 3000],
    [3, 6000],
    [4, 10000]
  ]);

  var formatLabel = new google.visualization.NumberFormat({
    groupingSymbol: ' ',
    fractionDigits: 0
  });

  // format tooltips
  formatLabel.format(data, 1);

  // create axis labels
  var axisTicks = [];
  var axisRange = data.getColumnRange(1);
  for (var i = axisRange.min; i <= axisRange.max; i=i+1000) {
    axisTicks.push({
      v: i,
      f: formatLabel.formatValue(i)
    });
  }

  var options = {
    height: 400,
    pointSize: 4,
    vAxis: {
      ticks: axisTicks
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, options);
}

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

如何将Google Charts中的轴上的格式设置为某种模式？

1 个答案: