如何将日期和值与 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', {包:['corechart']});google.setOnLoadCallback(drawChart);函数 drawChart() {var data = new google.visualization.DataTable();data.addColumn('日期', '日期');data.addColumn('number', 'view');数据.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]]);变量选项 = {title: '观看次数',宽度:900，高度:500，h轴:{格式:'MM-dd',网格线: {数:90}},v轴:{最小值:0，网格线: {颜色:'#f3f3f3'，数:6}}};var chart = new google.visualization.LineChart(document.getElementById('chart_div'));图表绘制(数据，选项)；}

<script 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屋！