Google Charts：柱形图反转y轴

Question

我想反转柱形图的 y 轴，以便将较低的数字显示得较高。

我试过 vAxis: { direction: -1 }

当我这样做时，列从图表顶部出来，我希望列从图表底部出来，如果它们的数字较小，它们会更高。

我在某处读到关于否定数字并使用数字格式将它们显示为正数，但我不知道该怎么做。

我使用公认的答案来得到我想要的 -

编辑： 我通过找到我的一组数据中最大的一个，即最大的 var 来创建自己的量表。最大是我的数据集的最大值，目标是让它稍微大一点，从图表的底部开始，以便该列在图表上的高度有点高，而不是 0 高度。相当硬编码，但适用于我的数据集。

if (biggest <= 15)
{
    biggest = 20;
} else if (biggest <= 45)
{
    biggest = 50;
} else if (biggest <= 70)
{
    biggest = 75;
} else
{   
    if (Math.ceil(biggest / 100) * 100 === biggest)
    {
        // Round up to the next nearest 100
        biggest = Math.ceil(biggest / 100) * 100 + 100;
    } else
    {
        // Round up to the nearest 100
        biggest = Math.ceil(biggest / 100) * 100;
    }
}

然后我将它分成 5 个相等的部分。

var temp1 = (biggest / 5);
var temp2 = (biggest / 5) * 2;
var temp3 = (biggest / 5) * 3;
var temp4 = (biggest / 5) * 4;

然后将其添加到图表中，如下所示：

var options = {
    title: 'Rank Comparison',
    bar: { groupWidth: '75%' },
    vAxis: {
        ticks: [
        // use object notation to provide y-axis labels
        {v: 0, f: biggest.toString()},
        {v: temp1, f: temp4.toString()},
        {v: temp2, f: temp3.toString()},
        {v: temp3, f: temp2.toString()},
        {v: temp4, f: temp1.toString()},
        {v: biggest, f: '0'}
      ]
    },
    chartArea: {
        left: '3.5%',
        width: '79%'
    },
    seriesType: 'bars',
    backgroundColor: 'transparent',
    legend: 
    {
        alignment: 'center'
    }
}

Answer 1

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

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    // use object notation to provide formatted number for tooltip
    ['Test', {v: 1, f: '-1'}],
    ['Test', {v: 2, f: '-2'}],
    ['Test', {v: 3, f: '-3'}]
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {
    vAxis: {
      ticks: [
        // use object notation to provide y-axis labels
        {v: 0, f: '0'},
        {v: 1, f: '-1'},
        {v: 2, f: '-2'},
        {v: 3, f: '-3'},
        {v: 4, f: '-4'}
      ]
    }
  });
}

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