自定义google-chart hAxis标签

时间:2019-11-21 09:48:22

标签: javascript charts google-visualization

我正在使用带有负值的google-chart堆叠式BarChart。我想在不更改实际值的情况下将负hAxis标签动态更改为正。

enter image description here

1 个答案:

答案 0 :(得分:0)

您可以提供自己的自定义标签,
使用ticks

上的hAxis选项

使用对象表示法,我们可以提供值(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>