html - 如何只显示数组谷歌图表中的刻度

Question

我有一个折线图，用户可以在其中查看他们多年来在比赛中取得的成绩。最多有60位。我将从数据库中填充这些数据。

问题是当我只想显示 1、15、30、45、60 时，所有 60 个位置都显示在 y 轴上

我相信会发生这种情况，因为我将 y 轴上的刻度从第 1 位更改为第 1 位，因为这有利于用户体验。

但由于我是从数据库中提取的，因此所有 60 个报价都需要存在。尽管在图表上我实际上希望每 15 个刻度显示一次。

这是我的代码:

// Callback that draws line chart for progress report
  function drawLineChart() {
    var data = google.visualization.arrayToDataTable([
      ['Date', 'Orouke', 'feis nara'],
      ['2014',  1,      4],
      ['2015',  11,      46],
      ['2016',  60,       11],
      ['2017',  10,      5]
    ]);

    var options = {
      title: 'Progress Report',
      width: 600,
      height: 550,
      legend: { position: 'bottom' },
      vAxis: { title: 'Competition Placement', 
              direction: -1, 
              gridlines: {count: 10}, 
              ticks: [{ v: 1, f: '1st Place'}, {v: 2, f: '2nd Place'}, {v: 3, f: '3rd Place'}, {v: 4, f: '4th Place'}, {v: 5, f: '5th Place'}, {v: 6, f: '6th Place'}, {v: 7, f: '7th Place'}, {v: 8, f: '8th Place'}, {v: 9, f: '9th Place'}, {v: 10, f: '10th Place'}, {v: 11, f: '11th Place'}, { v: 12, f: '12th Place'}, {v: 13, f: '13th Place'}, {v: 14, f: '14th Place'}, {v: 15, f: '15th Place'}, {v: 16, f: '16th Place'}, {v: 17, f: '17th Place'}, {v: 18, f: '18th Place'}, {v: 19, f: '19th Place'}, {v: 20, f: '20th Place'}, {v: 21, f: '21st Place'}, {v: 22, f: '22nd Place'}, { v: 23, f: '23rd Place'}, {v: 24, f: '24th Place'}, {v: 25, f: '25th Place'}, {v: 26, f: '26th Place'}, {v: 27, f: '27th Place'}, {v: 28, f: '28th Place'}, {v: 29, f: '29th Place'}, {v: 30, f: '30th Place'}, {v: 31, f: '31st Place'}, {v: 32, f: '32nd Place'}, {v: 33, f: '33rd Place'}, { v: 34, f: '34th Place'}, {v: 35, f: '35th Place'}, {v: 36, f: '36th Place'}, {v: 37, f: '37th Place'}, {v: 38, f: '38th Place'}, {v: 39, f: '39th Place'}, {v: 40, f: '41st Place'}, {v: 42, f: '42nd Place'}, {v: 43, f: '43rd Place'}, {v: 44, f: '44th Place'}, {v: 45, f: '45th Place'}, {v: 46, f: '46th Place'}, {v: 47, f: '47th Place'}, {v: 48, f: '48th Place'}, {v: 49, f: '49th Place'}, {v: 50, f: '51st Place'}, {v: 52, f: '52nd Place'}, {v: 53, f: '53rd Place'}, {v: 54, f: '54th Place'}, {v: 55, f: '55th Place'}, {v: 56, f: '56th Place'}, {v: 57, f: '57th Place'}, {v: 58, f: '58th Place'}, {v: 59, f: '59th Place'}, {v: 60, f: '60th Place'}] }
    };


    var chart = new google.visualization.LineChart(document.getElementById('line_chart'));

    chart.draw(data, options);
  }

注意:我还没有使用php，因为我决定先设置图表，然后再填写php。

Answer 1

您可以使用 for 循环动态构建报价...

for (var i = 0; i <= 60; i = i + 15) {
  addTick(i);
}

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Orouke', 'feis nara'],
    ['2014',  1,      4],
    ['2015',  11,      46],
    ['2016',  60,       11],
    ['2017',  10,      5]
  ]);

  // build ticks
  var ticks = [];
  for (var i = 0; i <= 60; i = i + 15) {
    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,
    legend: {
      position: 'bottom'
    },
    vAxis: {
      title: 'Competition Placement',
      direction: -1,
      gridlines: {count: 10},
      ticks: ticks
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
  chart.draw(data, options);
});

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