Как получить, чтобы все строки имели одинаковое значение оси X при редактировании подсказок GOOGLE CHARTS

Question

У меня есть график, где информация будет извлекаться из базы данных.Но сейчас я просто пытаюсь заставить его работать, жестко запрограммировав его.

Я отредактировал всплывающую подсказку для линейного графика, но когда я это делаю, каждая линия отдельно и значение оси X дублируется.

так что я хочу, чтобы все линии проходили в одну и ту же точку оси x 2014, 2015. Но вместо этого она удваивается и, таким образом, каждая линия не пересекает друг друга.

Вот как я хочу, чтобы это выглядело:

А вот код, который я использовал:

function drawLineChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Orouke', 'feis nara'],
      ['2014',  1,      4],
      ['2015',  11,      46],
      ['2016',  60,       null],
      ['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 place';
                  break;

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

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

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

    var options = {
      title: 'Progress Report: Dancer\'s competition placement',
      tooltip: {isHtml: true},
      width: 600,
      height: 550,
      interpolateNulls: true,
      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);
  }

И когда я пытаюсь редактировать всплывающую подсказку, она выглядит следующим образом:

и вот код:

function drawLineChart() {
      var data = google.visualization.arrayToDataTable([

        ["Year", "Orouke", {type: 'string', role: 'tooltip'}, "Feis Nara", {type: 'string', role: 'tooltip'}, "Garden State Feis", {type: 'string', role: 'tooltip'},],
          ["2014",  1, "Feis: Orouke Feis Date: 10-12-2014 Rank: 1st Place", null, "", null, ""],
          ["2015",  11, "Feis: Orouke Feis Date: 1-12-2015 Rank: 11th Place", null, "", null, ""],
          ["2016",  60, "Feis: Orouke Feis Date: 8-30-2016 Rank: 60th Place", null, "", null, ""],
          ["2017",  10, "Feis: Orouke Feis Date: 9-25-2017 Rank: 10th Place", null, "", null, ""],
          ["2014",  null, "", 4, "Feis: Feis Nara Feis Date: 2-1-2014 Rank: 4th Place", null, ""],
          ["2015",  null, "", 46, "Feis: Feis Nara Feis Date: 3-26-2015 Rank: 46th Place", null, ""],
          ["2016",  null, "", null, "", null, ""],
          ["2017",  null, "", 5, "Feis: Feis Nara Feis Date: 1-25-2017 Rank: 5th Place", null, ""],
          ["2014",  null, "", null, "", 12, "Feis: Garden State Feis Date: 5-17-2014 Rank: 12th Place"],
          ["2016",  null, "", null, "", 26, "Feis: Garden State Feis Date: 8-27-2016 Rank: 26th Place"],

    ]);





      // 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 place';
        break;

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

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

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

    var options = {
      title: 'Progress Report',
      tooltip: {isHtml: true},
      //pointSize: 5,
      width: 600,
      height: 550,
      interpolateNulls: true,
      legend: { 
          position: 'bottom' 
      },
      vAxis: { 
          title: 'Competition Placement', 
          direction: -1, 
          gridlines: {count: 10}, 
          ticks: ticks
      }
    };

Answer 1

попробуйте использовать числа вместо строк для значений оси X ...

var data = google.visualization.arrayToDataTable([
  ["Year", "Orouke", {type: 'string', role: 'tooltip'}, "Feis Nara", {type: 'string', role: 'tooltip'}, "Garden State Feis", {type: 'string', role: 'tooltip'},],
  [2014,  1, "Feis: Orouke Feis Date: 10-12-2014 Rank: 1st Place", null, "", null, ""],
  [2015,  11, "Feis: Orouke Feis Date: 1-12-2015 Rank: 11th Place", null, "", null, ""],
  [2016,  60, "Feis: Orouke Feis Date: 8-30-2016 Rank: 60th Place", null, "", null, ""],

вместо ...

var data = google.visualization.arrayToDataTable([
  ["Year", "Orouke", {type: 'string', role: 'tooltip'}, "Feis Nara", {type: 'string', role: 'tooltip'}, "Garden State Feis", {type: 'string', role: 'tooltip'},],
  ["2014",  1, "Feis: Orouke Feis Date: 10-12-2014 Rank: 1st Place", null, "", null, ""],
  ["2015",  11, "Feis: Orouke Feis Date: 1-12-2015 Rank: 11th Place", null, "", null, ""],
  ["2016",  60, "Feis: Orouke Feis Date: 8-30-2016 Rank: 60th Place", null, "", null, ""],

строки на оси создают дискретную ось,против чисел непрерывная ось,
см. -> дискретный против непрерывного

дискретная ось будет повторять значения и отображаться в том же порядке, что и таблица данных.

непрерывная ось будет соответственно сортировать строки,
однако, непрерывная ось также может повторять метки.
все это зависит от числового формата.

в этом случае диаграмма не осознает, что мы работаем с годами
, если мы конвертируем в числа, значения по оси x по умолчанию могут привести к ...

2,014.0, 2,014.5, 2,015.0, 2,015.5, 2,016.0, ...

если мы изменим формат на '0', мы все равно получим то же количество меток,
, но теперь десятичная дробь скрыта, поэтому мы получаем повторные метки.

2014, 2014, 2015, 2015, 2016, ...

как таковые, мы просто предоставляем свои собственные тики, используя -> data.getDistinctValues(0)

см. Следующий рабочий фрагмент ...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["Year", "Orouke", {type: 'string', role: 'tooltip'}, "Feis Nara", {type: 'string', role: 'tooltip'}, "Garden State Feis", {type: 'string', role: 'tooltip'},],
    [2014,  1, "Feis: Orouke Feis Date: 10-12-2014 Rank: 1st Place", null, "", null, ""],
    [2015,  11, "Feis: Orouke Feis Date: 1-12-2015 Rank: 11th Place", null, "", null, ""],
    [2016,  60, "Feis: Orouke Feis Date: 8-30-2016 Rank: 60th Place", null, "", null, ""],
    [2017,  10, "Feis: Orouke Feis Date: 9-25-2017 Rank: 10th Place", null, "", null, ""],
    [2014,  null, "", 4, "Feis: Feis Nara Feis Date: 2-1-2014 Rank: 4th Place", null, ""],
    [2015,  null, "", 46, "Feis: Feis Nara Feis Date: 3-26-2015 Rank: 46th Place", null, ""],
    [2016,  null, "", null, "", null, ""],
    [2017,  null, "", 5, "Feis: Feis Nara Feis Date: 1-25-2017 Rank: 5th Place", null, ""],
    [2014,  null, "", null, "", 12, "Feis: Garden State Feis Date: 5-17-2014 Rank: 12th Place"],
    [2016,  null, "", null, "", 26, "Feis: Garden State Feis Date: 8-27-2016 Rank: 26th Place"],
  ]);

  // 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 place';
        break;

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

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

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

  var options = {
    title: 'Progress Report',
    tooltip: {isHtml: true},
    //pointSize: 5,
    width: 600,
    hAxis: {
      format: '0',
      ticks: data.getDistinctValues(0)
    },
    height: 550,
    interpolateNulls: true,
    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>