Google Charts时间轴网格 - 更改时间轴标签范围

Question

我使用Google Charts API绘制多部分流程的时间表。现在它会自动调整;对于下面显示的图表，网格线之间的窗口是两天，如果我在那里放了更多的事件，它可能是一周左右，使图表不可读。

如何将图表设置为每天绘制网格线而不是自动调整？或者是否有此API的替代品我可以使用其源代码进行自定义？

Answer 1

将其作为响应，这个链接就是一个例子。看看

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放在文档的头部或作为codepen的外部资源//

Answer 2

您可能会认为没有办法为连续图表设置步骤。

但您可以根据步数和时间线宽度设置gridlines:{count: }。