Google 图表(可视化)中堆叠条形图的第三个条形图动画不起作用
Animation is not working for third bar in stacked bar chart in Google Charts (Visualization)
我正在使用 Google 图表(Google 可视化),它运行良好。但是现在,我在动画中遇到了一个奇怪的问题。这是一个堆积条形图。前两列(条)动画完美,但第三列(条)立即出现,动画不适用于最后一列(第三列)。
我尝试了总共 2 个小节,但现在第 2 个小节的动画不起作用(立即出现)。很明显,问题出在最后一根柱子上。 Google 图表末尾的堆叠条形图是否存在缺陷?
这是我的代码:
var data = google.visualization.arrayToDataTable([
['Status', awating, not_interested, interested, { role: 'annotation' }],
['SANDRA COOMBS', 2, 4, 2, ''],
['VINCENT ODA', 2, 2, 2, ''],
]);
arTotal = niTotal = iTotal = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {
if (data.getValue(i, 1) != null) {
arTotal += data.getValue(i, 1);
}
if (data.getValue(i, 2) != null) {
niTotal += data.getValue(i, 2);
}
if (data.getValue(i, 3) != null) {
iTotal += data.getValue(i, 3);
}
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
},
3, {
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
}]);
var options = {
legend: {
position: 'none'
},
chartArea: { width: width, height: height, right: right },
isStacked: true,
orientation: orientation.orientation,
colors: ['#008FBE', '#BE1E2D', '#00BD90'],
fontSize: '12',
fontName: 'OpenSans-Regular',
hAxis: {
viewWindowMode: 'maximized',
},
vAxis: {
viewWindowMode: 'maximized',
},
animation: {
startup: true,
duration: 1500,
easing: 'out',
},
};
var chart = new google.visualization.ColumnChart(document.getElementById("currentStatusChart"));
google.visualization.events.addListener(chart, 'ready', readyHandler);
chart.draw(view, options);
我在 startup
,
上使用动画时遇到了各种错误
特别是当 DataView
用于绘制图表时
解决方法是在绘制图表之前将 DataView
转换为 DataTable
,
你可以使用方法 --> toDataTable()
view.toDataTable()
在这种情况下似乎确实有帮助,
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Status', 'awating', 'not_interested', 'interested', { role: 'annotation' }],
['SANDRA COOMBS', 2, 4, 2, ''],
['VINCENT ODA', 2, 2, 2, ''],
]);
arTotal = niTotal = iTotal = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {
if (data.getValue(i, 1) != null) {
arTotal += data.getValue(i, 1);
}
if (data.getValue(i, 2) != null) {
niTotal += data.getValue(i, 2);
}
if (data.getValue(i, 3) != null) {
iTotal += data.getValue(i, 3);
}
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
},
3, {
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
}]);
var options = {
legend: {
position: 'none'
},
//chartArea: { width: width, height: height, right: right },
isStacked: true,
//orientation: orientation.orientation,
colors: ['#008FBE', '#BE1E2D', '#00BD90'],
fontSize: '12',
fontName: 'OpenSans-Regular',
hAxis: {
viewWindowMode: 'maximized',
},
vAxis: {
viewWindowMode: 'maximized',
},
animation: {
startup: true,
duration: 1500,
easing: 'out',
},
};
var chart = new google.visualization.ColumnChart(document.getElementById("currentStatusChart"));
chart.draw(view.toDataTable(), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="currentStatusChart"></div>
我正在使用 Google 图表(Google 可视化),它运行良好。但是现在,我在动画中遇到了一个奇怪的问题。这是一个堆积条形图。前两列(条)动画完美,但第三列(条)立即出现,动画不适用于最后一列(第三列)。
我尝试了总共 2 个小节,但现在第 2 个小节的动画不起作用(立即出现)。很明显,问题出在最后一根柱子上。 Google 图表末尾的堆叠条形图是否存在缺陷?
这是我的代码:
var data = google.visualization.arrayToDataTable([
['Status', awating, not_interested, interested, { role: 'annotation' }],
['SANDRA COOMBS', 2, 4, 2, ''],
['VINCENT ODA', 2, 2, 2, ''],
]);
arTotal = niTotal = iTotal = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {
if (data.getValue(i, 1) != null) {
arTotal += data.getValue(i, 1);
}
if (data.getValue(i, 2) != null) {
niTotal += data.getValue(i, 2);
}
if (data.getValue(i, 3) != null) {
iTotal += data.getValue(i, 3);
}
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
},
3, {
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
}]);
var options = {
legend: {
position: 'none'
},
chartArea: { width: width, height: height, right: right },
isStacked: true,
orientation: orientation.orientation,
colors: ['#008FBE', '#BE1E2D', '#00BD90'],
fontSize: '12',
fontName: 'OpenSans-Regular',
hAxis: {
viewWindowMode: 'maximized',
},
vAxis: {
viewWindowMode: 'maximized',
},
animation: {
startup: true,
duration: 1500,
easing: 'out',
},
};
var chart = new google.visualization.ColumnChart(document.getElementById("currentStatusChart"));
google.visualization.events.addListener(chart, 'ready', readyHandler);
chart.draw(view, options);
我在 startup
,
上使用动画时遇到了各种错误
特别是当 DataView
用于绘制图表时
解决方法是在绘制图表之前将 DataView
转换为 DataTable
,
你可以使用方法 --> toDataTable()
view.toDataTable()
在这种情况下似乎确实有帮助,
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Status', 'awating', 'not_interested', 'interested', { role: 'annotation' }],
['SANDRA COOMBS', 2, 4, 2, ''],
['VINCENT ODA', 2, 2, 2, ''],
]);
arTotal = niTotal = iTotal = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {
if (data.getValue(i, 1) != null) {
arTotal += data.getValue(i, 1);
}
if (data.getValue(i, 2) != null) {
niTotal += data.getValue(i, 2);
}
if (data.getValue(i, 3) != null) {
iTotal += data.getValue(i, 3);
}
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
},
3, {
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
}]);
var options = {
legend: {
position: 'none'
},
//chartArea: { width: width, height: height, right: right },
isStacked: true,
//orientation: orientation.orientation,
colors: ['#008FBE', '#BE1E2D', '#00BD90'],
fontSize: '12',
fontName: 'OpenSans-Regular',
hAxis: {
viewWindowMode: 'maximized',
},
vAxis: {
viewWindowMode: 'maximized',
},
animation: {
startup: true,
duration: 1500,
easing: 'out',
},
};
var chart = new google.visualization.ColumnChart(document.getElementById("currentStatusChart"));
chart.draw(view.toDataTable(), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="currentStatusChart"></div>