通过在几秒钟之后移动其“图表范围”滑块，Google Chart中的模拟 [英] Simulation in Google Chart by moving its Chart range slider after Some Seconds
本文介绍了通过在几秒钟之后移动其“图表范围”滑块，Google Chart中的模拟的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
此处输入图片说明我想通过使用图表范围来移动图表过滤器滑块。我喜欢在屏幕上有一个播放按钮。当我按下播放按钮，然后范围滑块这是固定的一个或两个分钟范围内移动特定的时间间隔。我会和你分享我的代码。
var chart = new google.visualization.ChartWrapper（{
chartType：'LineChart' ，
containerId：'chart_div'，
options：{
// title：'Phase 1 -Tower 44'，
hAxis：{
format ：'yyyy-MMM-dd hh：mm'，
title：'Time'，
textStyle：{
color：'black'，
fontSize：10，
fontName：'Arial'，
bold：false，
italic：false
}，
gridlines：{color：'gray'}，
titleTextStyle：{
color：'black'，
fontSize：10，
fontName：'Arial'，
bold：true，
italic：false
}
}，
vAxes：{
0：{
viewWindowMode：'explicit'，
title：'Line Current（A）'，
textStyle：{color：'＃ED0A0A'}，
titleTextStyle：{
color：'ED0A0A'
}，
viewWindow：{
分钟：0，
最多：700
}，
滴答：[0，100，200，300，400，500，600，700]，
gridlines：{color：'transparent'}
}，
1：{
标题：'线温度（°C）'，
textStyle：{color：'＃004BA5'}，
gridlines：{color：'gray'}，
viewWindow：{$ b $ min：0，
最大值：500
}，
滴答：[0，50，100，150，200，250，300，350，400，450，500]，
titleTextStyle：{
color：'＃004BA5'
}
}
}，
系列：{
0：{targetAxisIndex：0}，
1：{targetAxisIndex：1}
}，
chartArea：{
width：'85％'，
height：500
}，
// lineWidth：3，
// lineDashStyle：[1，2，2]，
'width' ：'85％'，
'height'：620，
curveType：'function'，
颜色：['＃ED0A0A'，'＃004BA5'，'＃EDB80F ']，
图例：{
位置：'none'，
}，
pointsVisible：true
}
}）;
然后我的控制包装代码在
var control = new google.visualization.ControlWrapper（{
controlType：'ChartRangeFilter'，
containerId：'control_div'，
options：{
filterColumnIndex：0，
ui：{
chartOptions：{
height：40，
chartArea：{
宽度：'90％'，
}，
'hAxis'：{'baselineColor'：'none'，格式：hh：mm：ss}
//'gridlines'：{'color'：'none'}
}
}
}，
}）;
和播放按钮点击事件就像这样...
$ （）函数（）{
setInterval（function（）{
var state = stateStatus.getState（）;
control.setOption（'ui.chartOptions.hAxis.viewWindow.min'，state.range。开始）;
control.setOption（'ui.chartOptions.hAxis.viewWindow.max'，state.range.end）;
control.setState（controll.getState（ ））;
control.draw（）;
$ b}，500）;
drawDateRange ...
google.charts.load（'current'，{callback：function（ ）{drawChart（）; $（window）.resize（drawChart）; }，packages：['controls'，'corechart']}）;函数drawChart（）{var oneDay =（1000 * 60 * 60 * 24）; var oneWeek =（oneDay * 7）; var startDate = new Date（2017，0，1）; var endDate = new Date（）; var data = new google.visualization.DataTable（）; data.addColumn（'date'，'TimeStamp'）; data.addColumn（'number'，'Value'）; for（var i = startDate.getTime（）; i
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =https://www.gstatic.com /charts/loader.js\"></script><div id =仪表板> < button id =play>播放< / button> < div id =control-date>< / div> < div id =chart-line>< / div> < div id =control-time>< / div>< / div>
$ b
enter image description here I want to move a chart through using its chart range filter slider. i wan something like there is a play button on the screen .when i press play button then the range slider which is fixed some one or two minutes range are moving with specific interval of time. i will share my code with you. i want something like simulation.
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
//title: 'Phase 1 -Tower 44',
hAxis: {
format: ' yyyy-MMM-dd hh:mm',
title: 'Time',
textStyle: {
color: 'black',
fontSize: 10,
fontName: 'Arial',
bold: false,
italic: false
},
gridlines: { color: 'grey' },
titleTextStyle: {
color: 'black',
fontSize: 10,
fontName: 'Arial',
bold: true,
italic: false
}
},
vAxes: {
0: {
viewWindowMode: 'explicit',
title: 'Line Current (A)',
textStyle: { color: '#ED0A0A' },
titleTextStyle: {
color: 'ED0A0A'
},
viewWindow: {
min: 0,
max: 700
},
ticks: [0, 100, 200, 300, 400, 500, 600, 700],
gridlines: { color: 'transparent' }
},
1: {
title: 'Line Temperature (°C)',
textStyle: { color: '#004BA5' },
gridlines: { color: 'grey' },
viewWindow: {
min: 0,
max: 500
},
ticks: [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500],
titleTextStyle: {
color: '#004BA5'
}
}
},
series: {
0: { targetAxisIndex: 0 },
1: { targetAxisIndex: 1 }
},
chartArea: {
width: '85%',
height: 500
},
//lineWidth: 3,
//lineDashStyle: [1, 2, 2],
'width': '85%',
'height': 620,
curveType: 'function',
colors: ['#ED0A0A', '#004BA5', '#EDB80F'],
legend: {
position: 'none',
},
pointsVisible: true
}
});
then my control wrapper code is below
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 40,
chartArea: {
width: '90%',
},
'hAxis': { 'baselineColor': 'none', format: " hh:mm:ss" }
// , 'gridlines': { 'color': 'none' }
}
}
},
});
and play button click event is something like this...
$("#play").click(function () {
setInterval(function () {
var state = stateStatus.getState();
control.setOption('ui.chartOptions.hAxis.viewWindow.min', state.range.start);
control.setOption('ui.chartOptions.hAxis.viewWindow.max', state.range.end);
control.setState(controll.getState());
control.draw();
}, 500);
解决方案
see drawDateRange in the following working snippet...
google.charts.load('current', {
callback: function () {
drawChart();
$(window).resize(drawChart);
},
packages: ['controls', 'corechart']
});
function drawChart() {
var oneDay = (1000 * 60 * 60 * 24);
var oneWeek = (oneDay * 7);
var startDate = new Date(2017, 0, 1);
var endDate = new Date();
var data = new google.visualization.DataTable();
data.addColumn('date', 'TimeStamp');
data.addColumn('number', 'Value');
for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
data.addRow([
new Date(i),
(2 * ((i - startDate.getTime()) / oneDay) + 8) // y = 2x + 8
]);
}
var controlDate = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control-date',
options: {
filterColumnLabel: 'TimeStamp',
ui: {
chartOptions: {
hAxis: {
format: 'dd MMM yyyy'
}
}
}
}
});
function drawDateRange(rangeStart) {
var drawAgain = true;
var rangeEnd = new Date(rangeStart.getTime() + oneWeek);
if (rangeEnd.getTime() > endDate.getTime()) {
rangeEnd = endDate;
drawAgain = false;
}
controlDate.setState({
range: {
start: rangeStart,
end: rangeEnd
}
});
controlDate.draw();
if (drawAgain) {
setTimeout(function () {
drawDateRange(rangeEnd);
}, 200);
} else {
setTimeout(function () {
controlDate.setState({});
controlDate.draw();
}, 200);
}
}
function drawTimeRange() {
var state = controlDate.getState();
controlTime.setState({
range: {
start: state.range.start,
end: state.range.end
}
});
controlTime.draw();
}
$("#play").click(function () {
drawDateRange(startDate);
});
google.visualization.events.addListener(controlDate, 'ready', drawTimeRange);
google.visualization.events.addListener(controlDate, 'statechange', drawTimeRange);
var controlTime = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control-time',
options: {
filterColumnLabel: 'TimeStamp',
ui: {
chartOptions: {
hAxis: {
format: 'hh:mm:ss'
}
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart-line'
});
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
dash.bind([controlDate, controlTime], [chart]);
dash.draw(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<button id="play">Play</button>
<div id="control-date"></div>
<div id="chart-line"></div>
<div id="control-time"></div>
</div>
这篇关于通过在几秒钟之后移动其“图表范围”滑块，Google Chart中的模拟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![此处输入图片说明](\"https://i.stack.imgur.com/fVgDc.png\"){kind=link}
