Google Charts日期軸標籤不正確

Question

我一直在研究具有日期軸的Google折線圖。我注意到軸標籤的滴答是由網格線的數量決定的，與我傳遞的數據不一樣。有人能告訴我如何強制軸標籤與我傳遞的數據同步。 請找到鏈接，小提琴：https://jsfiddle.net/FarhanI/5ga6xu44/

function drawChart() { 

    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Time of Day'); 
    data.addColumn('number', 'Rating'); 

    data.addRows([ 
     [new Date(2015, 0, 1), 5], 
     [new Date(2015, 0, 7), 3],[new Date(2015, 0, 14), 3], [new Date(2015, 0, 21), 2],[new Date(2015, 0, 28), 8], 
    ]); 


    var options = { 
     title: 'Rate the Day on a Scale of 1 to 10', 
     width: 900, 
     height: 500, 
     hAxis: { 
     format: 'M/d/yy', 
     gridlines: {count: 9} 
     }, 
     vAxis: { 
     gridlines: {color: 'none'}, 

     } 
    }; 

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

    chart.draw(data, options); 

    var button = document.getElementById('change'); 

    button.onclick = function() { 

     // If the format option matches, change it to the new option, 
     // if not, reset it to the original format. 
     options.hAxis.format === 'M/d/yy' ? 
     options.hAxis.format = 'MMM dd, yyyy' : 
     options.hAxis.format = 'M/d/yy'; 

     chart.draw(data, options); 
    }; 
    } 

我也想有網格線顯示爲y軸，因爲我無法用折線圖來獲得Y軸。我嘗試將網格線指定爲1，但我只能在X軸中間獲得1個網格線。

有人請讓我知道，如果我可以得到Y軸的折線圖。

欣賞幫助， Farhan。

Answer 1

可以提供定製hAxis.ticks

與數據同步，建立與各行的日期數組

// load custom ticks 
var ticks = []; 
for (var i = 0; i < data.getNumberOfRows(); i++) { 
    ticks.push(data.getValue(i, 0)); 
} 

然後使用數組中的配置選項

hAxis: { 
    format: 'M/d/yy', 
    ticks: ticks 
    } 

請注意：不遵循y軸所需要的，請您澄清一下...
- >獲得與折線圖

Y軸，如果你只是單純的想看到網格線，從配置選項刪除以下...

vAxis: { 
    gridlines: {color: 'none'} 
    } 

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Time of Day'); 
 
    data.addColumn('number', 'Rating'); 
 

 
    data.addRows([ 
 
     [new Date(2015, 0, 1), 5], 
 
     [new Date(2015, 0, 7), 3], 
 
     [new Date(2015, 0, 14), 3], 
 
     [new Date(2015, 0, 21), 2], 
 
     [new Date(2015, 0, 28), 8] 
 
    ]); 
 

 
    // load custom ticks 
 
    var ticks = []; 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
     ticks.push(data.getValue(i, 0)); 
 
    } 
 

 
    var options = { 
 
     title: 'Rate the Day on a Scale of 1 to 10', 
 
     width: 900, 
 
     height: 500, 
 
     hAxis: { 
 
     format: 'M/d/yy', 
 
     ticks: ticks 
 
     } 
 
    }; 
 

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

 
    var button = document.getElementById('change'); 
 
    button.onclick = function() { 
 
     // If the format option matches, change it to the new option, 
 
     // if not, reset it to the original format. 
 
     options.hAxis.format === 'M/d/yy' ? 
 
     options.hAxis.format = 'MMM dd, yyyy' : 
 
     options.hAxis.format = 'M/d/yy'; 
 
     chart.draw(data, options); 
 
    }; 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<input type="button" id="change" value="Change" /> 
 
<div id="chart_div"></div>