如何将日期和值与Google Chart中的网格线对齐？

2023年3月7日 270次阅读

我在我的应用程序中使用Google Chart以下代码(
JSFiddle)：

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

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'date');
  data.addColumn('number', 'view');
  data.addRows([
    [new Date('2015-08-01'), 5],
    [new Date('2015-08-02'), 7],
    [new Date('2015-08-03'), 2],
    [new Date('2015-08-04'), 16],
    [new Date('2015-08-05'), 3],
    [new Date('2015-08-06'), 6],
    [new Date('2015-08-07'), 1]          
  ]);    

  var options = {
    title: 'view count',
    width: 900,
    height: 500,
    hAxis: {
        format: 'MM-dd',
        gridlines: {count: 90}
      },
   vAxis: {
        minValue: 0,
        gridlines: {
            color: '#f3f3f3',
            count: 6
        }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

但是,图表在日期和网格线之间不匹配：

《如何将日期和值与Google Chart中的网格线对齐？》
如何匹配(同步)网格和日期？

最佳答案 更改日期格式(mm / dd / yyyy与yyyy-mm-dd)似乎可以使其对齐…

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

function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'date');
    data.addColumn('number', 'view');

    data.addRows([
        [new Date('08/01/2015'), 5],
        [new Date('08/02/2015'), 7],
        [new Date('08/03/2015'), 2],
        [new Date('08/04/2015'), 16],
        [new Date('08/05/2015'), 3],
        [new Date('08/06/2015'), 6],
        [new Date('08/07/2015'), 1]

    ]);


    var options = {
        title: 'view count',
        width: 900,
        height: 500,
        hAxis: {
            format: 'MM-dd',
            gridlines: {
                count: 90
            }
        },
        vAxis: {
            minValue: 0,
            gridlines: {
                color: '#f3f3f3',
                count: 6
            }
        }
    };

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

    chart.draw(data, options);
}
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
点赞