我正在尝试创建一个既具有动画又具有交替颜色的图形
我能够使图形显示交替的颜色，但是第二种颜色没有动画，它只是在所有内容加载后出现
我的代码：
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawChart() {
// Create and populate the data table.
var option = {title:"Some Graph that doesn't actually show anything",
width:900, height:500,
animation: {duration: 2000, easing: 'out',},
vAxis: {title: "Yearly Spending"},
isStacked:true,
hAxis: {title: "Some Amount", minValue:0, maxValue:100},
series: [{color: '#5B6770', visibleInLegend: true}, {color: '#CF4520', visibleInLegend: true}]
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Percent');
data.addRow(['2003', 0]);
data.addRow(['2004', 0]);
data.addRow(['2005', 0]);
data.addRow(['2006', 0]);
data.addRow(['2007', 0]);
data.addRow(['2008', 0]);
data.addRow(['2009', 0]);
data.addRow(['2010', 0]);
data.addRow(['2011', 0]);
data.addRow(['2012', 0]);
data.addRow(['2013', 0]);
data.addColumn('number', 'Other');
// Create and draw the visualization.
var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(data, option);
data.setValue(0, 1, 75);
data.setValue(1, 2, 55);
data.setValue(2, 1, 30);
data.setValue(3, 2, 75);
data.setValue(4, 1, 65);
data.setValue(5, 2, 20);
data.setValue(6, 1, 56);
data.setValue(7, 2, 75);
data.setValue(8, 1, 55);
data.setValue(9, 2, 63);
data.setValue(10, 1, 48);
chart.draw(data, option);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
我怎样才能使所有的条带动起来？
最佳答案
最初初始化图形时，第3列中的值为空（因为您添加了图形但没有行值）。结果，我认为该API不会为这些值添加动画效果。如果您按以下方式更改代码，那么它会为我设置所有动画效果：
function drawChart() {
// Create and populate the data table.
var option = {title:"Some Graph that doesn't actually show anything",
width:900, height:500,
animation: {duration: 2000, easing: 'out',},
vAxis: {title: "Yearly Spending"},
isStacked:true,
hAxis: {title: "Some Amount", minValue:0, maxValue:100},
series: [{color: '#5B6770', visibleInLegend: true}, {color: '#CF4520', visibleInLegend: true}]
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Percent');
data.addColumn('number', 'Other');
data.addRows([
['2003', 0, 0],
['2004', 0, 0],
['2005', 0, 0],
['2006', 0, 0],
['2007', 0, 0],
['2008', 0, 0],
['2009', 0, 0],
['2010', 0, 0],
['2011', 0, 0],
['2012', 0, 0],
['2013', 0, 0]
]);
// Create and draw the visualization.
var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(data, option);
data.setValue(0, 1, 75);
data.setValue(1, 2, 55);
data.setValue(2, 1, 30);
data.setValue(3, 2, 75);
data.setValue(4, 1, 65);
data.setValue(5, 2, 20);
data.setValue(6, 1, 56);
data.setValue(7, 2, 75);
data.setValue(8, 1, 55);
data.setValue(9, 2, 63);
data.setValue(10, 1, 48);
chart.draw(data, option);
}
我对代码进行了一些整理，以使您可以轻松地在使用
addRows方法定义数据并首先添加所有列分配时查看正在执行的操作。否则，代码与您的代码相同。关于javascript - Google Charts条形图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18709478/