change timeline label span

I'm using Google Charts API to draw timeline of a multipart process. Right now it is adjusted automatically; for the chart shown below the window between grid lines is two days, and if I put more events there it can be a week or so making the chart unreadable.

How to set the chart to draw grid lines every day instead of adjusting it automatically? Or is there an alternative to this API I can use its source code to customize?

---

Make it as responsive, this links is an example. Check it out

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();
});

// Reminder: you need to put https://www.google.com/jsapi in the head of your document or as an external resource on codepen //

---

It may disppoinsed you that there is no way to set steps for a continuous chart.

But you can set gridlines:{count: } according to your step and timeline width.

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

上一篇: Angular 2和Three.js

下一篇: 更改时间线标签跨度