更改时间线标签跨度

我正在使用Google Charts API绘制多部分流程的时间表。 现在它会自动调整; 对于下面显示的图表,网格线之间的窗口为两天,如果我在此处放置更多事件,则可能需要一周左右才能使图表无法读取。

如何将图表设置为每天绘制网格线而不是自动调整它? 或者是否有替代这个API我可以使用它的源代码来定制?

胡说


让它作为响应,这个链接就是一个例子。 一探究竟

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上的外部资源//


它可能让您感到沮丧,因为没有办法为连续图表设置步骤。

但是你可以根据你的步长和时间线宽度设置gridlines:{count: }

链接地址: http://www.djcxy.com/p/36879.html

上一篇: change timeline label span

下一篇: using "reactive native" with our existing code