如何在Google图表中将日期和值与网格线对齐？ [英] How do I align date and values to gridlines in Google Chart?

问题描述

我在我的应用程序中使用Google Chart，使用以下代码（
如何匹配（同步）网格和日期？

解决方案

更改日期格式（ mm / dd / yyyy vs. 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（[[新日期（'08 / 01/2015'），5]，[新日期（'08 / 02/2015'），7]，[新日期（'08 / 03/2015' 2]，[新日期（'08 / 04/2015'），16]，[新日期（'08 / 05/2015'），3]，[新日期（'08 / 06/2015'），6] ，[新日期（'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）;}  

 脚本src =https://www.google.com/jsapi>< / script>< div id =chart_div>< / div>  

I'm using Google Chart in my application with the following code (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);
}

However, the chart does not match between date and gridlines:

How can I match (synchronize) grid and date?

解决方案

Changing the date format (mm/dd/yyyy vs. yyyy-mm-dd) seems to get it to align...

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>

这篇关于如何在Google图表中将日期和值与网格线对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！