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>

如何仅显示Google图表数组中的刻度线

1 个答案: