Question

在Google Charts中，'hAxis': {'gridlines': {'count': 3} }语句似乎有效，但是当我使用chartWrapper作为交互式绘图的一部分时，它却没有。我并不十分关心垂直网格线，但我想控制X轴上有多少个标签。我认为标签通常附在网格线上 - 每个网格线一个标签。

我在Google Charts网站上有一个例子，我改变的唯一方法是尝试并放入3个网格线：

https://jsfiddle.net/emorris/gLcq1h2j/

Answer 1

图表选项ticks仅受continuous axis

支持

在你分享的小提琴中，view放在图表上，
将第一列从'date'类型转换为'string'，
这导致discrete axis

 // Convert the first column from 'date' to 'string'.
 'view': {
   'columns': [{
     'calc': function(dataTable, rowIndex) {
       return dataTable.getFormattedValue(rowIndex, 0);
     },
     'type': 'string'
   }, 1, 2, 3, 4]
 }

到控制X轴上的标签数量，删除view

在此处动态构建ticks，使用范围过滤器的state，
了解当前显示在图表上的日期范围

当控件的'statechange'事件触发时，需要重新绘制图表

请参阅以下工作代码段，每隔5天创建一个轴标签......

＆＃13;

google.charts.load('current', {
  callback: drawChartRangeFilter,
  packages: ['corechart', 'controls']
});

function drawChartRangeFilter() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Stock low');
  data.addColumn('number', 'Stock open');
  data.addColumn('number', 'Stock close');
  data.addColumn('number', 'Stock high');

  var open, close = 300;
  var low, high;
  for (var day = 1; day < 121; ++day) {
    var change = (Math.sin(day / 2.5 + Math.PI) + Math.sin(day / 3) - Math.cos(day * 0.7)) * 150;
    change = change >= 0 ? change + 10 : change - 10;
    open = close;
    close = Math.max(50, open + change);
    low = Math.min(open, close) - (Math.cos(day * 1.7) + 1) * 15;
    low = Math.max(0, low);
    high = Math.max(open, close) + (Math.cos(day * 1.3) + 1) * 15;
    var date = new Date(2012, 0, day);
    data.addRow([date, Math.round(low), Math.round(open), Math.round(close), Math.round(high)]);
  }

  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')
  );

  var control = new google.visualization.ControlWrapper({
   controlType: 'ChartRangeFilter',
   containerId: 'control',
   options: {
     filterColumnIndex: 0,
     ui: {
       chartType: 'LineChart',
       chartOptions: {
         chartArea: {
           width: '92%'
         },
         hAxis: {
           baselineColor: 'none'
         },
         height: 72
       },
       chartView: {
         columns: [0, 3]
       },
       minRangeSize: 86400000
     }
   },
   state: {
     range: {
       start: new Date(2012, 1, 9),
       end: new Date(2012, 2, 20)
     }
   }
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'CandlestickChart',
    containerId: 'chart',
    options: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 12,
        left: 48,
        bottom: 48,
        right: 48
      },
      vAxis: {
        viewWindow: {
          min: 0,
          max: 2000
        }
      },
      legend: {
        position: 'none'
      }
    }
  });

  google.visualization.events.addListener(control, 'statechange', setAxisTicks);

  function setAxisTicks() {
    var oneDay = (1000 * 60 * 60 * 24);
    var dateRange = control.getState().range;
    var ticksAxisH = [];
    for (var i = dateRange.start.getTime(); i <= dateRange.end.getTime(); i = i + (oneDay * 5)) {
      ticksAxisH.push(new Date(i));
    }
    if (ticksAxisH.length > 0) {
      ticksAxisH.push(new Date(ticksAxisH[ticksAxisH.length - 1].getTime() + (oneDay * 5)));
    }
    chart.setOption('hAxis.ticks', ticksAxisH);
    if (chart.getDataTable() !== null) {
      chart.draw();
    }
  }
  setAxisTicks();

  dashboard.bind(control, chart);
  drawDashboard();

  $(window).resize(drawDashboard);

  function drawDashboard() {
    dashboard.draw(data);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="chart"></div>
  <div id="control"></div>
</div>

＆＃13;

Google Chartwrapper中水平轴上的标签数量

1 个答案: