javascript - 如何通过 Google Chat 添加百分比标签而不更改顺序

Question

我想向数字标签添加百分比标记并找到了一个选项。

{hAxis: {format: 'percent'}}

但它也会将数字乘以 100 .

For instance, {hAxis: { format:'#,###%'} } displays the values "1,000%", "750%", and "50%" for values 10, 7.5, and 0.5.

https://developers.google.com/chart/interactive/docs/customizing_axes#number-formats

我怎样才能添加%到标签？

Answer 1

您可以尝试添加自定义轴标签，或刻度...

使用对象表示法，您可以提供...

值 (v:) 和格式化值 (f:)

然后使用谷歌的NumberFormat类，手动构建每个tick...

var formatPercent = new google.visualization.NumberFormat({
  suffix: '%'
});

...

ticks.push({
  v: data.getValue(i, 0),
  f: formatPercent.formatValue(data.getValue(i, 0))
});

...

hAxis: {
  ticks: ticks
}

<小时/>

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

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y'],
    [1, 1],
    [10, 2],
    [20, 3],
    [30, 4]
  ]);

  var formatPercent = new google.visualization.NumberFormat({
    pattern: '#,##0',
    suffix: '%'
  });

  var ticks = [];
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    ticks.push({
      v: data.getValue(i, 0),
      f: formatPercent.formatValue(data.getValue(i, 0))
    });
  }

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {
    hAxis: {
      ticks: ticks
    }
  });
}

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