如何在不翻转条形图的情况下获得vAxis减少的数字GOOGLE CHART（带有答案）

Question

使用答案进行编辑

我要发布对这个问题底部的第一个问题的答案。答案已由白帽用户收到，但由于某种原因，答案已删除。

对于第二个问题，我决定在一个单独的问题中提问，该问题已发布在此处How to change tick value GOOGLE CHARTS

我有两个问题

我有一个使用方向的条形图：-1使数字vaxis随图形的顶部数字1和底部数字10减小。 但是，当我这样做时，条形图上的条形也会上下翻转。我希望条形图的起点在图形的底部，即10所在。

是这样的：

我的第二个问题是我希望刻度线显示第一，第二和第三名，而第四名将取决于用户输入的内容

这是我的代码：

function drawChart() {
    var data = google.visualization.arrayToDataTable([
       // <?php
        ['Competitors', 'Competitors', { role: 'style' }, {type: 'string', role: 'tooltip'}],
        ['$dancerName',  2, 'color: #D4AF37', "$dancerName Placement: 2nd Place Overall Placement: 3%"],
        ['1st Pl Winner',  1, 'color: #91b224', "1st Place Winner Overall Placement: 1.6%"],
        ['2nd Pl Winner',  2, 'color: #91b224', "2nd Place Winner Overall Placement: 3%"],
        ['3rd Pl Winner',  3, 'color: #91b224', "3rd Place Winner Overall Placement: 5%"]

      // ?>
  ]);

  // build ticks
  var ticks = [];
  for (var i = 0; i <= 10; i = i + 3) {
    addTick(i);
  }
  function addTick(i) {
    var place;
    var digit;
    if (i === 0) {
      i = 1;
    }
digit = i.toString().substr(i.toString().length - 1);
switch (digit) {
  case '1':
    place = 'st';
    break;

  case '2':
    place = 'nd';
    break;

  case '3':
    place = 'rd';
    break;

  default:
    place = 'th';
}
ticks.push({
  v: i,
  f: i + place
});
}

var options = {
title: 'Progress Report',
width: 600,
height: 550,
tooltip: {isHtml: true},
colors: ['#91b224'],
legend: {
  position: 'bottom'
},
vAxis: {
  title: 'Competition Placement',
  direction: -1,
  gridlines: {count: 10},
  ticks: ticks
}
};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

答案代码：

 function drawChart() {
    var maxPlace = 4;

  var data = google.visualization.arrayToDataTable([
    ['Competitors', 'Competitors', {type: 'string', role: 'style'}, 
{type: 'string', role: 'tooltip'}],
['$dancerName', 4, 'color: #D4AF37', "$dancerName Placement: 2nd Place Overall Placement: 3%"],
['1st Pl Winner', 1, 'color: #91b224', "1st Place Winner Overall Placement: 1.6%"],
['2nd Pl Winner', 2, 'color: #91b224', "2nd Place Winner Overall Placement: 3%"],
['3rd Pl Winner', 3, 'color: #91b224', "3rd Place Winner Overall Placement: 5%"]
  ]);

 var view = new google.visualization.DataView(data);
 view.setColumns([0, {
calc: function (dt, row) {
  var place = dt.getValue(row, 1);
  return (maxPlace - place + 1);
},
type: data.getColumnType(1),
label: data.getColumnLabel(1)
}, 2, 3]);

 var ticks = [];
for (var i = 0; i <= maxPlace; i = i + 1) {
addTick(i);
}

function addTick(i) {
var place = (maxPlace - i + 1).toFixed(0);
switch (place.substr(place.length - 1)) {
  case '1':
    place += 'st';
    break;

  case '2':
    place += 'nd';
    break;

  case '3':
    place += 'rd';
    break;


  default:
    place += 'th';
}
ticks.push({
  v: i,
  f: place
});
}



var options = {
title: 'Progress Report',
width: 600,
height: 550,
tooltip: {
  isHtml: true
},
colors: ['#91b224'],
legend: {
  position: 'bottom'
},
vAxis: {
//  baseline: 1,
  title: 'Competition Placement',
  ticks: ticks
}
};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
}