Как выровнять линии сетки Google Chart с моими точками данных? - PullRequest
Новая
       27

Как выровнять линии сетки Google Chart с моими точками данных?

1 голос
/ 26 марта 2020

Несмотря на то, что я прочитал несколько похожих сообщений SO (в первую очередь этот , что является причиной для первого, закомментированного dataArray в моем фрагменте), я все еще не могу сделать мои линии сетки вдоль горизонтальной оси выровняйте мои фактические точки данных. Как видно из фрагмента ниже, я указал hAxis.ticks. Хотя это больше не отражено в этом фрагменте, я также поиграл с hAxis.gridlines.count, hAxis.minorGridlines.count и рядом других опций, но все безрезультатно. 

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  const data = new google.visualization.DataTable();
  
  data.addColumn('date', 'Dates');
  data.addColumn('number', 'Ratings');
  
  /* const dataArray = [
    [new Date('2020-12-22'),  2],
    [new Date('2020-01-05'),  6],
    [new Date('2020-01-05'),  7],
    [new Date('2020-02-02'),  8],
    [new Date('2020-02-16'), 10],
    [new Date('2020-03-01'),  5],
    [new Date('2020-03-15'),  9],
  ] */
  
  const dataArray = [
    [new Date('12/22/2019'),  2],
    [new Date('01/05/2020'),  6],
    [new Date('01/19/2020'),  7],
    [new Date('02/02/2020'),  8],
    [new Date('02/16/2020'), 10],
    [new Date('03/01/2020'),  5],
    [new Date('03/15/2020'),  9],
  ];
  
  data.addRows(dataArray);
  
  const dataView = new google.visualization.DataView(data);
  
  const chart = new google.visualization.LineChart(document.querySelector('#chart'));
  
  chart.draw(dataView, {
    pointSize:        5,
    lineWidth:        3,
    hAxis:            {
      format:    "MMM d, yyyy",
      ticks:     dataArray.map(d => d[0])
     }
  });
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart"></div>

1 Ответ

1 голос
/ 26 марта 2020

, похоже, проблема с 'current' версией гугл-чартов.
, если вы go вернулись к версии '45', она работает должным образом.

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

google.charts.load('45', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  const data = new google.visualization.DataTable();
  
  data.addColumn('date', 'Dates');
  data.addColumn('number', 'Ratings');
  
  /* const dataArray = [
    [new Date('2020-12-22'),  2],
    [new Date('2020-01-05'),  6],
    [new Date('2020-01-05'),  7],
    [new Date('2020-02-02'),  8],
    [new Date('2020-02-16'), 10],
    [new Date('2020-03-01'),  5],
    [new Date('2020-03-15'),  9],
  ] */
  
  const dataArray = [
    [new Date('12/22/2019'),  2],
    [new Date('01/05/2020'),  6],
    [new Date('01/19/2020'),  7],
    [new Date('02/02/2020'),  8],
    [new Date('02/16/2020'), 10],
    [new Date('03/01/2020'),  5],
    [new Date('03/15/2020'),  9],
  ];
  
  data.addRows(dataArray);
  
  const dataView = new google.visualization.DataView(data);
  
  const chart = new google.visualization.LineChart(document.querySelector('#chart'));
  
  chart.draw(dataView, {
    pointSize:        5,
    lineWidth:        3,
    hAxis:            {
      format:    "MMM d, yyyy",
      ticks:     dataArray.map(d => d[0])
     }
  });
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart"></div>
...