Question

我希望在底部具有一串日期，并且在y轴上具有一连串的排名（例如：第一名，第二名，第三名）

这里是我尝试做的，但是没有用。

// Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});

    // Draw line chart progress report
  google.charts.setOnLoadCallback(drawLineChart);

  // Draw pie chart rankings report
  google.charts.setOnLoadCallback(drawPieChart);

  // Callback that draws line chart for progress report
  function drawLineChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'comp NY', 'comp NJ'],
      ['10/2/2014',  '1st Place',      '4th Place'],
      ['11/21/2015',  '11th Place',      '46th Place'],
      ['12/1/2016',  '66th Place',       '11th Place'],
      ['1/15/2017',  '10 Place',      '5th Place']
    ]);

    var options = {
      title: 'Dancer\'s competition placement',
      width: 600,
      height: 550,
      legend: { position: 'bottom' }
    };

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

    chart.draw(data, options);
  }

当我这样做时，图表根本不会显示。

Answer 1

您可以通过Google图表提供的“ vAxis”选项参数来实现。

在我曾经使用过的地方找到此代码（对您的代码进行修改）。

// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});

  // Draw line chart progress report
google.charts.setOnLoadCallback(drawLineChart);

// Draw pie chart rankings report
// google.charts.setOnLoadCallback(drawPieChart);

// Callback that draws line chart for progress report
function drawLineChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'comp NY', 'comp NJ'],
    ['10/2/2014', 1, 4,],
    ['11/21/2015', 11,46],
    ['12/1/2016', 66, 11],
    ['1/15/2017', 10, 5]
  ]);

  var options = {
    title: 'Dancer\'s competition placement',
    width: 600,
    height: 550,
    legend: { position: 'bottom' },
    vAxis: { ticks: [{ v: 1, f: '1st Place'}, {v: 10, f: '10th Place'}, {v: 20, f: '20th Place'}, {v: 30, f: '30th Place'}, {v: 40, f: '40th Place'}, {v: 50, f: '50th Place'}, {v: 60, f: '60th Place'}, {v: 70, f: '70th Place'}]}
  };

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

  chart.draw(data, options);
}

您可以在此文档链接上找到有关自定义Google图表上的轴的更多信息=> https://developers.google.com/chart/interactive/docs/customizing_axes

PS：您不能在图形的值字段中输入字符串！

我可以在Google图表中将x轴和y轴都设为字符串吗？

1 个答案: