自定义 google-chart hAxis 标签答案

【问题标题】：Customize google-chart hAxis label自定义 google-chart hAxis 标签
【发布时间】：2019-11-21 09:48:22
【问题描述】：

我正在使用带有负值的 google-chart 堆积条形图。我想在不改变实际值的情况下动态地将负 hAxis 标签更改为正。

【问题讨论】：

标签： javascript charts google-visualization

【解决方案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

请参阅以下工作 sn-p...

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>

【讨论】：

我希望动态生成刻度并将其转换为绝对数字。该值的范围从 50 到 100 万，因此很难进行硬编码。
它可以很容易地动态完成，上面只是一个如何完成的例子。范围将来自用于绘制图表的数据？
您可以使用数据表方法getColumnRange(columnIndex)查找轴的范围