Google Chart:如何在面积图上添加缩放按钮 [英] Google Chart: How to add zoom buttons on Area chart
本文介绍了Google Chart:如何在面积图上添加缩放按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在 AreaChart 顶部添加缩放按钮,如 AnnotationChart.我搜索了相同的内容,但没有得到解决方案.谁能告诉我解决办法?我需要这样的按钮:
谢谢
解决方案
你必须手动添加按钮,
单击时,使用 state
属性
rangeFilter.setState({范围: {开始:currentRange.range.start,结束:新日期(currentRange.range.start.getTime()+可见范围)}});
请参阅以下工作片段,
每个按钮表示以毫秒为单位的可见范围,
单击时,在过滤器上设置范围...
google.charts.load('current', {包:['控件','corechart']}).then(函数(){var data = new google.visualization.DataTable();data.addColumn('日期', '日期');data.addColumn('number', 'Positive');data.addColumn('number', 'Negative');数据.addRows([[新日期(2017, 11, 20), 10, null],[新日期(2017, 11, 21), 5, null],[新日期(2017, 11, 22), 0, 0],[新日期(2017, 11, 23), null, -5],[新日期(2017, 11, 24), null, -10],[新日期(2017, 11, 25), null, -5],[新日期(2017, 11, 26), 0, 0],[新日期(2017, 11, 27), 10, null],[新日期(2017, 11, 28), 5, null],[新日期(2017, 11, 29), 0, 0],[新日期(2018, 0, 20), 00, null],[新日期(2018, 0, 21), 5, null],[新日期(2018, 0, 22), 0, 0],[新日期(2018, 0, 23), null, -5],[新日期(2018, 0, 24), null, -10],[新日期(2018, 0, 25), null, -5],[新日期(2018, 0, 26), 0, 0],[新日期(2018, 0, 27), 00, null],[新日期(2018, 0, 28), 5, null],[新日期(2018, 0, 29), 0, 0],[新日期(2018, 1, 20), 10, null],[新日期(2018, 1, 21), 5, null],[新日期(2018, 1, 22), 0, 0],[新日期(2018, 1, 23), null, -5],[新日期(2018, 1, 24), null, -10],[新日期(2018, 1, 25), null, -5],[新日期(2018, 1, 26), 0, 0],[新日期(2018, 1, 27), 10, null],[新日期(2018, 1, 28), 5, null],[新日期(2018, 1, 29), 0, 0],[新日期(2018, 2, 20), 10, null],[新日期(2018, 2, 21), 5, null],[新日期(2018, 2, 22), 0, 0],[新日期(2018, 2, 23), null, -5],[新日期(2018, 2, 24), null, -10],[新日期(2018, 2, 25), null, -5],[新日期(2018, 2, 26), 0, 0],[新日期(2018, 2, 27), 10, null],[新日期(2018, 2, 28), 5, null],[新日期(2018, 2, 29), 0, 0],[新日期(2018, 3, 20), 10, null],[新日期(2018, 3, 21), 5, null],[新日期(2018, 3, 22), 0, 0],[新日期(2018, 3, 23), null, -5],[新日期(2018, 3, 24), null, -10],[新日期(2018, 3, 25), null, -5],[新日期(2018, 3, 26), 0, 0],[新日期(2018, 3, 27), 10, null],[新日期(2018, 3, 28), 5, null],[新日期(2018, 3, 29), 0, 0],[新日期(2018, 4, 20), 10, null],[新日期(2018, 4, 21), 5, null],[新日期(2018, 4, 22), 0, 0],[新日期(2018, 4, 23), null, -5],[新日期(2018, 4, 24), null, -10],[新日期(2018, 4, 25), null, -5],[新日期(2018, 4, 26), 0, 0],[新日期(2018, 4, 27), 10, null],[新日期(2018, 4, 28), 5, null],[新日期(2018, 4, 29), 0, 0],[新日期(2018, 5, 20), 10, null],[新日期(2018, 5, 21), 5, null],[新日期(2018, 5, 22), 0, 0],[新日期(2018, 5, 23), null, -5],[新日期(2018, 5, 24), null, -10],[新日期(2018, 5, 25), null, -5],[新日期(2018, 5, 26), 0, 0],[新日期(2018, 5, 27), 10, null],[新日期(2018, 5, 28), 5, null],[新日期(2018, 5, 29), 0, 0],[新日期(2018, 6, 20), 10, null],[新日期(2018, 6, 21), 5, null],[新日期(2018, 6, 22), 0, 0],[新日期(2018, 6, 23), null, -5],[新日期(2018, 6, 24), null, -10],[新日期(2018, 6, 25), null, -5],[新日期(2018, 6, 26), 0, 0],[新日期(2018, 6, 27), 10, null],[新日期(2018, 6, 28), 5, null],[新日期(2018, 6, 29), 0, 0],[新日期(2018, 9, 20), 10, null],[新日期(2018, 9, 21), 5, null],[新日期(2018, 9, 22), 0, 0],[新日期(2018, 9, 23), null, -5],[新日期(2018, 9, 24), null, -10],[新日期(2018, 9, 25), null, -5],[新日期(2018, 9, 26), 0, 0],[新日期(2018, 9, 27), 10, null],[新日期(2018, 9, 28), 5, null],[新日期(2018, 9, 29), 0, 0],[新日期(2018, 11, 20), 10, null],[新日期(2018, 11, 21), 5, null],[新日期(2018, 11, 22), 0, 0],[新日期(2018, 11, 23), null, -5],[新日期(2018, 11, 24), null, -10],[新日期(2018, 11, 25), null, -5],[新日期(2018, 11, 26), 0, 0],[新日期(2018, 11, 27), 10, null],[新日期(2018, 11, 28), 5, null],[新日期(2018, 11, 29), 0, 0],]);var rangeFilter = new google.visualization.ControlWrapper({controlType: 'ChartRangeFilter',容器 ID:'过滤范围',选项: {过滤列索引:0,用户界面:{chartType: '面积图',图表选项:{图表区域:{宽度: '100%',左:36,右:18},身高:72}}}});var 图表 = 新的 google.visualization.ChartWrapper({chartType: '面积图',containerId: '图表区域',选项: {高度:280,传奇: {对齐:'结束',位置:'顶部'},动画片: {持续时间:500,缓动:'在',启动:真},图表区域:{高度:'100%',宽度: '100%',顶部:36,左:36,右:18,底部:36}}});$('#range-buttons button').on('click', function (sender) {var currentRange = rangeFilter.getState();var visibleRange = parseInt($(sender.target).data('range'));如果(isNaN(visibleRange)){rangeFilter.setState(null);} 别的 {rangeFilter.setState({范围: {开始:currentRange.range.start,结束:新日期(currentRange.range.start.getTime()+可见范围)}});}rangeFilter.draw();});var 仪表板 = 新的 google.visualization.Dashboard(document.getElementById('dashboard'));仪表板绑定(范围过滤器,图表);仪表板.绘制(数据);});
<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="仪表盘"><div id="range-buttons"><span>缩放: </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 id="chart-area"></div><div id="过滤器范围"></div>
I want to add zoom buttons on top of AreaChart like AnnotationChart. I searched for the same but didn't get the solution. Can anyone tell me the solution? I require buttons like this:
Thanks
解决方案
you'll have to add the buttons manually,
when clicked, set the visible range on the range filter using the state
property
rangeFilter.setState({
range: {
start: currentRange.range.start,
end: new Date(currentRange.range.start.getTime() + visibleRange)
}
});
see following working snippet,
each button represents the visible range in milliseconds,
when clicked, set the range on the filter...
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>
这篇关于Google Chart:如何在面积图上添加缩放按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文