在Android应用程序中对柱形图进行动画处理 [英] Animate the Column chart in Android application
问题描述
我想在 Android 应用程序中启动图表时在google柱形图中添加启动动画。我试图运行在 GoogleChart 中给出的代码
I want to add start up animation in google Column chart on starting the chart in Android Application. I tried to run the code given at GoogleChart that is
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
我已将动画属性添加为：
I have added the animation properties as:
animation: {
duration: 1000,
easing: 'linear',
startup: true
},
但该图表一开始并不是在Android App中制作动画。
我也尝试在浏览器中运行代码，图表运行正常，但没有动画。
But the chart is not animating in Android App on the start. I also tried to run the code in browser, the chart is working fine but is not animating.
推荐答案
有材料图表有几种不支持的选项，包括动画
there are several options Material charts do not support, including animation
请参阅-> 物料图特征奇偶校验＃2143的跟踪问题
材料图表-> google.charts.Bar -包：['bar']
Core 图表-> google.visualization.ColumnChart -软件包：['corechart']
使用带有以下选项的 Core 图表将显示与材料相似的
using a Core chart with the following option will display similar to Material
theme: 'material'
使用动画时，该选项不属于任何其他
when using animation, the option is not part of any other
问题中的代码具有动画作为图表的一部分-（ chart.animation ）
the code in the question has animation as part of chart -- (chart.animation)
它更像是...
var options = {
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
请参见以下$
see following working snippet for animation using Core chart...
google.charts.load('current', {
callback: function () {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
height: 600,
theme: 'material',
title: 'Company Performance'
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_material"></div>
注意： Core 图表没有图表
这篇关于在Android应用程序中对柱形图进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
