我在循环中使用过Google图表。我正在从api获取数据,并且正在循环打印图表,它工作正常,但条下面的列名称被覆盖,它对单个条工作正常,但对于多个条则不能调整其名称。
google.charts.load('current', {packages: ['corechart','bar']});
$http.get(PUBLIC_URL+'apiname/'+$scope.form.isno).then(function success(response) {
google.charts.setOnLoadCallback(function() { drawBasic(response.data); });
});
function drawBasic(chartData) {
angular.forEach(chartData, function(value, key) {
var chartDataArray = [];
chartDataArray.push(['Bar', 'Index']);
angular.forEach(value, function(v, k) {
chartDataArray.push([v.name, parseInt(v.data)]);
});
//console.log(chartDataArray);
var data = google.visualization.arrayToDataTable(chartDataArray);
var title = 'Revenue vs Profit';
var options = {
title : title,
legend: { position: 'none' }
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"+(key+1)));
// var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
chart.draw(data, options);
});
}
chartDataArray示例:
[
['Bar', 'Index'],
['2012', 900],
['2013', 1000],
['2014', 1170],
['2015', 1250],
['2016', 1530]
]