javascript - 谷歌图表 : Column chart invert y axis

Question

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

我尝试过vAxis:{方向:-1}

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

我在某处读到过有关否定数字并使用数字格式将其显示为正值的内容，但我不知道该怎么做。

我使用接受的答案来得到我想要的 -

编辑: 我通过找到最大的数据集(最大的变量)创建了自己的规模。最大是我的数据集的最大值，目标是使其稍微大一点，以从图表底部开始，以便该列在图表上有一点高度，而不是 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

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

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>