从谷歌图表中制作柱状图的动画
Animating column chart from google charts
当我使用滑块来回移动时,我很难想出一个函数来动画图表中的单列条。。左和右。。我已经阅读了谷歌图表API文档上的动画文档,但我很难理解我需要做什么
这是我迄今为止的代码。我该从哪里开始研究如何使用我用钛制成的滑块来制作我的一个条的动画?我使用evalJS函数从我的app.js文件中调用函数updateChart()
。我已经验证了它的工作原理,当我的滑块来回移动时,我会做一个console.log。我只是似乎无法理解如何将其应用于设置单列栏的动画。任何想法都值得赞赏。
在我的html页面上设置谷歌图表。
<script type="text/javascript" src ="https://www.google.com/jsapi" > </script>
<script type="text/javascript ">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Importance');
data.addColumn('number', 'Earning');
data.addColumn({type: 'string', role: 'style'});
data.addRows([['',5,'#000000'], ['',5,'#ffffff'],['',5,'#666666'],['', 5,'#cccccc']]);
var options =
{
width: 200,
height: 240,
legend: {
position: 'none'
},
chartArea: {
backgroundColor: 'none'
},
bar: {
groupWidth: '100%'
},
animation: {
duration: 1000,
easing: 'out'
}
};
function updateChart() {
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
编辑后的代码:
<script type="text/javascript" src ="https://www.google.com/jsapi" > </script>
<script type="text/javascript ">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Importance');
data.addColumn('number', 'Earning');
data.addColumn({type: 'string', role: 'style'});
data.addRows([['',5,'#000000'], ['',5,'#ffffff'],['',5,'#666666'],['', 5,'#cccccc']]);
var options = {
width: 200,
height: 240,
legend: {
position: 'none'
},
chartArea: {
backgroundColor: 'none'
},
bar: {
groupWidth: '100%'
},
animation: {
duration: 1000,
easing: 'out'
}
};
function updateChart(value) {
data.setValue(0, 1, value);
chart.draw(data, options);
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Slider Hook Code in separate file(app.js)Titanium Platform
var sliderBarOne = Titanium.UI.createSlider({
top: '310',
left: '610',
min: '0',
max: '10',
width: '37%',
value: '5',
backgroundImage: 'assets/sliderBar.png'
});
sliderBarOne.addEventListener('change', function(e) {
chartView.evalJS("updateChart('" + e.value + "');");
});
您需要为调用updateChart
函数的滑块挂接一个事件侦听器。updateChart
函数应该从滑块中获取值并更改DataTable中的值,然后调用图表的draw
方法。如何将事件侦听器连接到滑块将取决于用于滑块的库。以下是一些示例代码,假设您的滑块对象有一个change
方法来设置更改事件处理程序,并有一个`getValue方法来获取滑块的值:
[编辑:添加到滑块代码中]
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Importance');
data.addColumn('number', 'Earning');
data.addColumn({type: 'string', role: 'style'});
data.addRows([
['',5,'#000000'],
['',5,'#ffffff'],
['',5,'#666666'],
['', 5,'#cccccc']
]);
var options = {
width: 200,
height: 240,
legend: {
position: 'none'
},
chartArea: {
backgroundColor: 'none'
},
bar: {
groupWidth: '100%'
},
animation: {
duration: 1000,
easing: 'out'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
function updateChart(value) {
data.setValue(0, 1, value);
chart.draw(data, options);
}
// create slider
var sliderBarOne = Titanium.UI.createSlider({
top: '310',
left: '610',
min: '0',
max: '10',
width: '37%',
value: '5',
backgroundImage: 'assets/sliderBar.png'
});
sliderBarOne.addEventListener('change', function(e) {
updateChart(e.value);
});
chart.draw(data, options);
}
相关文章:
- 谷歌组合图过渡动画
- 谷歌地图 API v3 标记掉落和反弹动画
- 在谷歌地图信息窗口中加载动画
- 从谷歌图表中制作柱状图的动画
- 谷歌地图api v3下降标记动画与延迟
- 动画闪烁没有基本的href只有谷歌铬
- 用谷歌地图js api v3制作路线动画
- 标记动画不适用于谷歌地图API
- 谷歌 API :仪表动画
- 谷歌地图API v3 - 带有动画的多个点
- 使用 setTimeout() 函数对谷歌地图折线进行动画处理
- JS谷歌地图API v3动画标记之间的坐标
- 动画谷歌地图标记
- 谷歌地图API动画和多个信息窗口
- 动画谷歌地图折线
- 动画谷歌地图弹跳标记
- 动画谷歌API地图标记与CSS
- 缓冲动画谷歌地图不显示
- 动画谷歌图表过渡多次
- 如何动画谷歌地图api圈