- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
最佳答案
您必须手动添加按钮,
单击时,使用 state
属性设置范围过滤器的可见范围
rangeFilter.setState({
range: {
start: currentRange.range.start,
end: new Date(currentRange.range.start.getTime() + visibleRange)
}
});
请参阅以下工作片段,
每个按钮代表可见范围(以毫秒为单位),
单击时,设置过滤器的范围...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Positive');
data.addColumn('number', 'Negative');
data.addRows([
[new Date(2017, 11, 20), 10, null],
[new Date(2017, 11, 21), 5, null],
[new Date(2017, 11, 22), 0, 0],
[new Date(2017, 11, 23), null, -5],
[new Date(2017, 11, 24), null, -10],
[new Date(2017, 11, 25), null, -5],
[new Date(2017, 11, 26), 0, 0],
[new Date(2017, 11, 27), 10, null],
[new Date(2017, 11, 28), 5, null],
[new Date(2017, 11, 29), 0, 0],
[new Date(2018, 0, 20), 00, null],
[new Date(2018, 0, 21), 5, null],
[new Date(2018, 0, 22), 0, 0],
[new Date(2018, 0, 23), null, -5],
[new Date(2018, 0, 24), null, -10],
[new Date(2018, 0, 25), null, -5],
[new Date(2018, 0, 26), 0, 0],
[new Date(2018, 0, 27), 00, null],
[new Date(2018, 0, 28), 5, null],
[new Date(2018, 0, 29), 0, 0],
[new Date(2018, 1, 20), 10, null],
[new Date(2018, 1, 21), 5, null],
[new Date(2018, 1, 22), 0, 0],
[new Date(2018, 1, 23), null, -5],
[new Date(2018, 1, 24), null, -10],
[new Date(2018, 1, 25), null, -5],
[new Date(2018, 1, 26), 0, 0],
[new Date(2018, 1, 27), 10, null],
[new Date(2018, 1, 28), 5, null],
[new Date(2018, 1, 29), 0, 0],
[new Date(2018, 2, 20), 10, null],
[new Date(2018, 2, 21), 5, null],
[new Date(2018, 2, 22), 0, 0],
[new Date(2018, 2, 23), null, -5],
[new Date(2018, 2, 24), null, -10],
[new Date(2018, 2, 25), null, -5],
[new Date(2018, 2, 26), 0, 0],
[new Date(2018, 2, 27), 10, null],
[new Date(2018, 2, 28), 5, null],
[new Date(2018, 2, 29), 0, 0],
[new Date(2018, 3, 20), 10, null],
[new Date(2018, 3, 21), 5, null],
[new Date(2018, 3, 22), 0, 0],
[new Date(2018, 3, 23), null, -5],
[new Date(2018, 3, 24), null, -10],
[new Date(2018, 3, 25), null, -5],
[new Date(2018, 3, 26), 0, 0],
[new Date(2018, 3, 27), 10, null],
[new Date(2018, 3, 28), 5, null],
[new Date(2018, 3, 29), 0, 0],
[new Date(2018, 4, 20), 10, null],
[new Date(2018, 4, 21), 5, null],
[new Date(2018, 4, 22), 0, 0],
[new Date(2018, 4, 23), null, -5],
[new Date(2018, 4, 24), null, -10],
[new Date(2018, 4, 25), null, -5],
[new Date(2018, 4, 26), 0, 0],
[new Date(2018, 4, 27), 10, null],
[new Date(2018, 4, 28), 5, null],
[new Date(2018, 4, 29), 0, 0],
[new Date(2018, 5, 20), 10, null],
[new Date(2018, 5, 21), 5, null],
[new Date(2018, 5, 22), 0, 0],
[new Date(2018, 5, 23), null, -5],
[new Date(2018, 5, 24), null, -10],
[new Date(2018, 5, 25), null, -5],
[new Date(2018, 5, 26), 0, 0],
[new Date(2018, 5, 27), 10, null],
[new Date(2018, 5, 28), 5, null],
[new Date(2018, 5, 29), 0, 0],
[new Date(2018, 6, 20), 10, null],
[new Date(2018, 6, 21), 5, null],
[new Date(2018, 6, 22), 0, 0],
[new Date(2018, 6, 23), null, -5],
[new Date(2018, 6, 24), null, -10],
[new Date(2018, 6, 25), null, -5],
[new Date(2018, 6, 26), 0, 0],
[new Date(2018, 6, 27), 10, null],
[new Date(2018, 6, 28), 5, null],
[new Date(2018, 6, 29), 0, 0],
[new Date(2018, 9, 20), 10, null],
[new Date(2018, 9, 21), 5, null],
[new Date(2018, 9, 22), 0, 0],
[new Date(2018, 9, 23), null, -5],
[new Date(2018, 9, 24), null, -10],
[new Date(2018, 9, 25), null, -5],
[new Date(2018, 9, 26), 0, 0],
[new Date(2018, 9, 27), 10, null],
[new Date(2018, 9, 28), 5, null],
[new Date(2018, 9, 29), 0, 0],
[new Date(2018, 11, 20), 10, null],
[new Date(2018, 11, 21), 5, null],
[new Date(2018, 11, 22), 0, 0],
[new Date(2018, 11, 23), null, -5],
[new Date(2018, 11, 24), null, -10],
[new Date(2018, 11, 25), null, -5],
[new Date(2018, 11, 26), 0, 0],
[new Date(2018, 11, 27), 10, null],
[new Date(2018, 11, 28), 5, null],
[new Date(2018, 11, 29), 0, 0],
]);
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'filter-range',
options: {
filterColumnIndex: 0,
ui: {
chartType: 'AreaChart',
chartOptions: {
chartArea: {
width: '100%',
left: 36,
right: 18
},
height: 72
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart-area',
options: {
height: 280,
legend: {
alignment: 'end',
position: 'top'
},
animation: {
duration: 500,
easing: 'in',
startup: true
},
chartArea: {
height: '100%',
width: '100%',
top: 36,
left: 36,
right: 18,
bottom: 36
}
}
});
$('#range-buttons button').on('click', function (sender) {
var currentRange = rangeFilter.getState();
var visibleRange = parseInt($(sender.target).data('range'));
if (isNaN(visibleRange)) {
rangeFilter.setState(null);
} else {
rangeFilter.setState({
range: {
start: currentRange.range.start,
end: new Date(currentRange.range.start.getTime() + visibleRange)
}
});
}
rangeFilter.draw();
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(rangeFilter, chart);
dashboard.draw(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<div id="dashboard">
<div id="range-buttons">
<span>Zoom: </span>
<button class="ui-button ui-widget ui-corner-all" data-range="3600000">1h</button>
<button class="ui-button ui-widget ui-corner-all" data-range="86400000">1d</button>
<button class="ui-button ui-widget ui-corner-all" data-range="432000000">5d</button>
<button class="ui-button ui-widget ui-corner-all" data-range="604800000">1w</button>
<button class="ui-button ui-widget ui-corner-all" data-range="2592000000">1m</button>
<button class="ui-button ui-widget ui-corner-all" data-range="7776000000">3m</button>
<button class="ui-button ui-widget ui-corner-all" data-range="15552000000">6m</button>
<button class="ui-button ui-widget ui-corner-all" data-range="31104000000">1y</button>
<button class="ui-button ui-widget ui-corner-all">max</button>
</div>
<div id="chart-area"></div>
<div id="filter-range"></div>
</div>
关于javascript - 谷歌图表 : How to add zoom buttons on Area chart,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50126940/
I have a question about adding files in git. I have found multiple stackoverflow questions about
我是 visual studio 的新手,来自 Delphi。 我有一个充满 .cs 文件的目录树(根是\Common)。 我还有一个充满应用程序的目录树(根目录是\Applications) 最后,
这个问题在这里已经有了答案: Array's lookup time complexity vs. how it is stored (4 个答案) Time complexity for java
谁能告诉我这两者有什么区别: ALTER TABLE x1 ADD INDEX(a); ALTER TABLE x1 ADD INDEX(b); 和 ALTER TABLE x1 ADD INDEX(
为什么有时我们使用 getChildren() add() 而其他时候我们直接使用 add() es: https://docs.oracle.com/javafx/2/get_started/for
如何使用 bootstrap css 在输入下方添加跨度?我需要做这样的事情: 最佳答案 是这样的吗? http://jsfiddle.net/swm53ran/205/ 您可以使用纯 CSS 来实现
问题 np.add(X, 2*Y, out=X) 比 np.add(X, Y, out=X); np.add(X, Y, out=X).使用 np.add(X, Y, out=X); 是一种实际做法吗
当我跑 git add --intent-to-add .所有未跟踪的文件将其状态从“未跟踪的文件”( git status -s 显示 ?? )更改为“未暂存以进行提交的更改”( git statu
我不知道 .add 之间有什么区别和 .sink.add ? 例子: StreamController myStreamController = StreamController(); stream
getContentPane().add() 和 add() 的意思一样吗? public class TestFrame extends JFrame{ public TestFrame()
git add . 和 git add * 会完成完全相同的事情吗? 最佳答案 不,不会。 * 是一个 glob 模式,不会匹配以 开头的文件。 例如,假设这是当前目录,我有 2 个新文件要添加 fo
git的分支与合并的两种方法 git add -A和 git add . git add -u在功能上看似很相近,但还是存在一点差别 git add . :他会
git add [--all | -A] 之间有什么区别?和 git add . ? 最佳答案 此答案仅适用于 Git 版本 1.x。对于 Git 版本 2.x,请参阅其他答案。 总结: git ad
我刚刚安装了最新的 Wix v3.7。我创建了一个 VS 2010“Excel 2010 加载项”项目,并在同一个解决方案中创建了一个 Wix“安装项目”。 问题是,当我尝试从 Wix 项目中引用 A
YUI.add 和 YUI().add 有什么区别? 最佳答案 在第一种情况下,您要注册一个模块可以加载到 YUI 沙箱中,在第二种情况下,您要构建一个沙箱,然后进行注册(这是一种非常不典型的用法)。
测试代码时,任何输入到列表中的值在按下“enter”后都会消失。 我对编程和网络开发非常陌生。请具体一点,以便我理解。 function addItem(){ var item = documen
我正在浏览 python 的 dis 包。我尝试了代码以查看它是如何工作的 >>> def get(): ... x=4 ... y=x+3 ............ this lin
我已经对我的文件夹进行了版本控制 git init git add . git commit -m 'Initial commit' 我应该怎么做 git add 对于我在 .? 中创建的每个新文件
当我执行 $ git add * 时,有时我意识到 git 不会将已删除的文件添加到舞台上,如果删除或添加它,我需要手动指示,但我想不通找出 $ git add --all 有什么区别。因此,如果星号
这个问题在这里已经有了答案: Difference between "git add -A" and "git add ." (12 个答案) 关闭 6 年前。 目前,当我想提交并将内容推送到远程
我是一名优秀的程序员,十分优秀!