Google Charts日付軸のラベルが正しくない

Question

私は日付軸を持つGoogle Lineチャートで作業しています。私は、軸ラベルの目盛りがグリッド線の数によって決定され、私が渡しているデータと同じではないことに気付きました。誰かが私が渡しているデータと同期するように軸ラベルをどのように強制することができるか教えてください。 フィドルのリンク見つけてください：私は折れ線グラフでY軸を取得することができませんでしたので、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軸として表示されていしようとしています。グリッド線を1と指定しようとしましたが、X軸の中央にもグリッド線は1つしかありませんでした。

折れ線グラフでY軸を取得できるかどうか教えてください。

助けを歓迎します。 ファーハン。

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軸に必要なものに従わない場合は、明示してください。
- >は...

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>

をY軸を取得します