javascript - 自定义 google-chart hAxis 标签

Question

我正在使用具有负值的 google-chart 堆叠条形图。我想动态地将负 hAxis 标签更改为正，而不更改实际值。

Answer 1

您可以提供自己的自定义标签，
使用 hAxis 上的 ticks 选项

使用对象表示法，我们可以提供值 (v:) 和格式化值 (f:)

{v: -8, f: '8.000'}

例如

hAxis: {
  format: '#,##0.000',
  ticks: [
    {v: -8, f: '8.000'},
    {v: -6, f: '6.000'},
    {v: -4, f: '4.000'},
    {v: -2, f: '2.000'},
    0, 2, 4, 6, 8
  ]
},
isStacked: true

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1'],
    ['0-10', -3, 3],
    ['11-20', -2.5, 2.5],
    ['21-30', -2, 2],
    ['31-40', -1.5, 1.5],
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.BarChart(container);

  chart.draw(data, {
    hAxis: {
      format: '#,##0.000',
      ticks: [
        {v: -8, f: '8.000'},
        {v: -6, f: '6.000'},
        {v: -4, f: '4.000'},
        {v: -2, f: '2.000'},
        0, 2, 4, 6, 8
      ]
    },
    isStacked: true
  });
});

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