谷歌图表水平滚动条 [英] Google chart horizontal scrollbar

问题描述

以下是我的图表：

解决方案

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

要允许此功能，只需添加 explorer：{axis： 'horizo​​ntal'} 在你的options对象中。您可能会注意到，您可以访问没有数据显示的区域，以停止向 explorer添加 keepInBounds：true 选项。 axis：'horizo​​ntal'，keepInBounds：true} 。

有关资源管理器选项可用此处在表格行名称 explorer 。

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

Here is my chart so far: 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>

I wanted to ask if there is a way to make elements in chart make bigger, but have a horizontal scrollbar with vAxes labels fixed and always visible?

Something like this:

解决方案

Google Charts has this explorer feature whereby you can scroll and zoom in/out of the Chart. However, no buttons or scroll bar will be displayed. You will have to use your mouse to drag and move horizontally on the chart displayed.

To allow this feature, simply add explorer: {axis: 'horizontal'} in your options object. You may notice that you can visit areas where there is no data displayed, to stop this add keepInBounds: true to the explorer options to give explorer: {axis: 'horizontal', keepInBounds: true}.

More information on the explorer options is available here under the table row name explorer.

If you would like a scroll bar feature, then another feature you could explore is a Google Charts ChartRangeFilter available here. Implementation details and steps are available here and changes need to be made accordingly to your chart type.

这篇关于谷歌图表水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！