javascript - 谷歌图表水平滚动条

Question

这是我目前的图表: JSFiddle

<!-- begin snippet: js hide: false console: true -->

<!-- language: lang-js -->
        google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);


  function drawVisualization() {
    // Some raw data (not necessarily accurate)

    var data = google.visualization.arrayToDataTable([
     ['Day', 'data1', 'data2', 'data3', 'data4', 'data1 compare', 'data2 compare', 'data3 compare', 'data4 compare', '', ''],
     [0.85,  165, 938,  522, 998, null, null, null, null,  614.6, 500],
     [1.15,  null, null, null, null, 165, 938,  522, 998,  614.6, 510],
     [1.5, 0, 0, 0, 0, 0, 0, 0, 0, null, null ],       
     [1.85,  135, 1120, 599, 1268, null, null, null, null, 682, 530],
     [2.15, null, null, null, null, 165, 938,  522, 998, 682, 540],
     [14,  135, 1120, 599, 1268, null, null, null, null, 682, 530],
     [16, null, null, null, null, 165, 938,  522, 998, 682, 540]
  ]);

var options = {
  title : 'Chart',
  vAxes: [
    {title: 'foo'},
    {title: 'bar'}
  ],
  //hAxis: { ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]},
  hAxis: { 
    ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,  16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
    textStyle : {
        fontSize: 9 // or the number you want
    }
  },
  seriesType: 'bars',
  bar: { groupWidth: 1000 },
  isStacked: true,
  legend: 'none',
  interpolateNulls: true,
  series: {
        0: {
            targetAxisIndex: 0
        },
        4: {
            targetAxisIndex: 0
        },
        8: {
            targetAxisIndex: 1,
            type: 'line'
        },
        9: {
            targetAxisIndex: 1,
            type: 'line'
        }
    }
};

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
  }
</script>

<!-- language: lang-html -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

我想问一下是否有办法让图表中的元素变大，但有一个带有 vAxes 标签的水平滚动条固定且始终可见？

是这样的:

Answer 1

Google Charts 具有此浏览器功能，您可以通过它滚动和放大/缩小图表。但是，不会显示任何按钮或滚动条。您必须使用鼠标在显示的图表上水平拖动和移动。

要启用此功能，只需在您的选项对象中添加 explorer: {axis: 'horizo​​ntal'}。您可能会注意到，您可以访问没有显示数据的区域，要停止此操作，请将 keepInBounds: true 添加到资源管理器选项中，以提供 explorer: {axis: 'horizo​​ntal', keepInBounds: true 。

有关 explorer 选项的更多信息可用 here在表行名称 explorer 下。

如果您想要滚动条功能，那么您可以探索的另一个功能是可用的 Google Charts ChartRangeFilter here .提供实现细节和步骤 here并且需要根据您的图表类型进行相应的更改。