2013-04-05 89 views
1

这个奇怪的东西让我看到水平线上只有4个网格线。任何人都可以帮忙吗?Google Chart - date&gridlines

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Now'); 
    data.addColumn('number', 'Comparison'); 
    data.addRows([ 
    [new Date(2008, 1 ,1), 1264,  1477], 
      [new Date(2008, 1 ,2), 1499,  1406], 
      [new Date(2008, 1 ,3), 1322,  1105], 
      [new Date(2008, 1 ,4), 1147,  1154], 
      [new Date(2008, 1 ,5), 1309,  1227], 
      [new Date(2008, 1 ,6), 1251,  1298], 
      [new Date(2008, 1 ,7), 1238,  1264], 
      [new Date(2008, 1 ,8), 1264,  1477], 
      [new Date(2008, 1 ,9), 1499,  1406], 
      [new Date(2008, 1 ,10), 1322,  1105], 
      [new Date(2008, 1 ,11), 1147,  1154], 
      [new Date(2008, 1 ,12), 1309,  1227], 
      [new Date(2008, 1 ,13), 1251,  1298], 
      [new Date(2008, 1 ,14), 1238,  1264], 
      [new Date(2008, 1 ,15), 1789,  1256], 
      [new Date(2008, 1 ,16), 1789,  1078], 
      [new Date(2008, 1 ,17), 1965,  975], 
      [new Date(2008, 1 ,18), 1654,  896], 
      [new Date(2008, 1 ,19), 1478,  789], 
      [new Date(2008, 1 ,20), 1278,  989], 
      [new Date(2008, 1 ,21), 1078,  1009], 
      [new Date(2008, 1 ,22), 1698,  1109], 
      [new Date(2008, 1 ,23), 1398,  1209], 
      [new Date(2008, 1 ,24), 1298,  1509], 
      [new Date(2008, 1 ,25), 1298,  1009], 
      [new Date(2008, 1 ,26), 1198,  1209], 
     ]); 
     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
     chart.draw(data); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 2000px; height: 1000px;"></div> 
    </body> 
</html> 

回答

2

图表的默认行为是使用5个网格线。请参阅the documentation下的hAxis.gridlines.count

如果要增加网格线的数量,请在图表中设置选项。例如:

chart.draw(data, {vAxis: {gridlines: {count: 100}}}) 

这里是网格线的整个混乱的样品(来自谷歌游乐场上述选项添加):

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'], 
    ['A', 1,  1,   0.5], 
    ['B', 2,  0.5,   1], 
    ['C', 4,  1,   0.5], 
    ['D', 8,  0.5,   1], 
    ['E', 7,  1,   0.5], 
    ['F', 7,  0.5,   1], 
    ['G', 8,  1,   0.5], 
    ['H', 4,  0.5,   1], 
    ['I', 2,  1,   0.5], 
    ['J', 3.5,  0.5,   1], 
    ['K', 3,  1,   0.5], 
    ['L', 3.5,  0.5,   1], 
    ['M', 1,  1,   0.5], 
    ['N', 1,  0.5,   1] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {curveType: "function", 
        width: 500, height: 400, 
        vAxis: {maxValue: 10, gridlines: {count: 100}} 
       } 
     ); 
} 

当你没有指定你有多少网格线预计,请编辑上述内容以满足您的需求。