Google Chartsタイムライングリッド - タイムラインラベルのスパン変更

Question

私は、Google Charts APIを使用してマルチパートプロセスのタイムラインを描画しています。今は自動的に調整されます。下のグラフはグリッド線の間のウィンドウを2日間表示しています。そこにイベントを追加すると、チャートが読めなくなることがあります。

自動的に調整するのではなく、毎日グリッド線を描画するようにグラフを設定するにはどうすればよいですか？あるいは、このAPIの代わりにソースコードを使用してカスタマイズすることができますか？

Answer 1

それは連続チャートのための手順を設定する方法がないことをdisppoinsedことがあります。

ただし、ステップとタイムラインの幅に応じてgridlines:{count: }を設定することができます。

Answer 2

このリンクは反応的ですが、このリンクは例です。アウトそれをチェック

https://codepen.io/flopreynat/pen/BfLkA

HTML：

<div class="row"> 
    <div class="col-md-12 text-center"> 
    <h1>Make Google charts responsive</h1> 
    <p>Full blog post details <a href="http://flopreynat.com/blog/make-google-charts-responsive.html">on my blog</a></p> 
    </div> 
    <div class="col-md-4 col-md-offset-4"> 
    <hr /> 
    </div> 
    <div class="clearfix"></div> 
    <div class="col-md-6"> 
    <div id="chart_div1" class="chart"></div> 
    </div> 
    <div class="col-md-6"> 
    <div id="chart_div2" class="chart"></div> 
    </div> 
</div> 

CSS：

.chart { 
    width: 100%; 
    min-height: 450px; 
} 

JS：

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart1); 
function drawChart1() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', 'Expenses'], 
    ['2004', 1000,  400], 
    ['2005', 1170,  460], 
    ['2006', 660,  1120], 
    ['2007', 1030,  540] 
    ]); 

    var options = { 
    title: 'Company Performance', 
    hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
}; 

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1')); 
    chart.draw(data, options); 
} 

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart2); 
function drawChart2() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', 'Expenses'], 
    ['2013', 1000,  400], 
    ['2014', 1170,  460], 
    ['2015', 660,  1120], 
    ['2016', 1030,  540] 
    ]); 

    var options = { 
    title: 'Company Performance', 
    hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
    vAxis: {minValue: 0} 
    }; 

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div2')); 
    chart.draw(data, options); 
} 

$(window).resize(function(){ 
    drawChart1(); 
    drawChart2(); 
}); 

//注意：あなたはhttps://www.google.com/jsapiを配置する必要があり、私あなたの文書の頭やコードの外部リソース//