jquery - 谷歌图表中垂直轴静态的水平滚动

Question

我google chart在我的应用程序中使用，我想实现滚动。我可以通过设置容器 div 的样式来做到这一点。

但问题是它会随轴滚动整个图形。如何仅水平滚动图表区域并保持垂直轴静止？

Answer 1

Visualization API 有一个内置控件来处理图表滚动：ChartRangeFilter。

Answer 2

看起来 ' overflow-x' 是你要找的

在创建图表的脚本中，请务必添加以下内容：

var options = {
                'title': 'Chart title',
                'hAxis': { title: 'axis title', titleTextStyle: { color: 'blue' } },
                'width': data.getNumberOfRows() * 65,
                'height': 300,
                'bar': {groupWidth: 20}
            };

这样，宽度将由条数设置。接下来你需要设置 overflow-x 属性：

<style type="text/css">
        #chart_div {
            overflow-x: scroll;
            width: 500px;
        }
    </style>

现在会发生什么，图表将是 500px 宽度，如果你有比这更多的数据 - 你会得到一个水平滚动条

希望能帮助到你