Могу ли я сделать оси x и y строкой в ​​Google-чартах?

Question

Я хочу, чтобы внизу была строка с датами, а по оси Y - строка с рейтингами (например: 1-е место, 2-е место, 3-е место)

Вот что я пытался сделать, но это не работает.

// 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

Этого можно добиться с помощью параметра «vAxis», который предлагают диаграммы Google.

Найдите этот код (исправления внесены в ваш код), где я использовал то же самое.

// 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: Вы не можете ввести жало в поле значения для графика!