当我更改数据、系列、标签时，角度图条形图不会更新

我正在尝试基于以下代码创建深入条形图： https://shaynedcoder.wordpress.com/2016/10/14/angular-chart-drilldown/comment-page-1/#comment-10 我创建了一个包含主图表、明细图表列表和临时图表的对象。模板中的图表指令设置为显示主图表的数据、系列和标签。此代码的作用是使用明细图表切换主图表。我使用 chrome 检查了切换是否正在发生，但不知何故图表没有任何变化。

下面是模板：

这是我的控制器

var app = angular.module('app', ["chart.js"]).controller('ChartController',['$scope', function($scope){
	
	 var colors = ['#A13030', '#E4882B', '#56932A', '#1D5F8A', '#317C73', '#6E5282']; // color code for all charts
var options = { // common config of all charts
legend: {
display: true,
position: 'bottom',
}
};
var primaryDataModel = { //object definition (use as a template)
header: "",
labels: [],
series:[],
data: [],
colors: colors,
options: options,
};
var drilldownDataModel = { //object definition (use as a template)
header: "",
labels: [],
series: [],
data: [],
colors: colors,
options: options,
};
var chartModel = { // object definition (use as a template)
uid: "",
primary: null, //obj of primaryDataModel
drilldown: null
};
	var primaryData = { //object definition (use as a template)
header: "Happiness Across Dubai",
labels: ["Umm Al Rumool","Al Barsha","Wasel Center", "Tasjeel Al Qusais","Dubai Driving Center"],
series:["Happy", "Neutral", "Unhappy"],
data: [[33,22,44,11,42],
		[15,24,67,43,11],
		[42,11,67,90,42]],
colors: colors,
options: options,
};
	var drilldownDataUmmAlRumool = { //object definition (use as a template)
header: "Umm Al Rumool",
labels: ["Male", "Female"],
series: ["Happy", "Neutral", "Unhappy"],
data: [[22,31],[52,21],[57,31]],
colors: colors,
options: options,
};
	var drilldownDataAlBarsha = { //object definition (use as a template)
header: "Al Barsha",
labels: ["Male", "Female"],
series: ["Happy", "Neutral", "Unhappy"],
data: [[26,33],[22,61],[17,35]],
colors: colors,
options: options,
};
	var drilldownDataWaselCenter = { //object definition (use as a template)
header: "WaselCenter",
labels: ["Male", "Female"],
series: ["Happy", "Neutral", "Unhappy"],
data: [[59,97],[53,51],[54,32]],
colors: colors,
options: options,
};
	var drilldownDataTasjeelAlQusais = { //object definition (use as a template)
header: "Tasjeel Al Qusais",
labels: ["Male", "Female"],
series: ["Happy", "Neutral", "Unhappy"],
data: [[22,3],[56,12],[87,34]],
colors: colors,
options: options,
};
	var drilldownDataDubaiDrivingCenter = { //object definition (use as a template)
header: "Dubai Driving Center",
labels: ["Male", "Female"],
series: ["Happy", "Neutral", "Unhappy"],
data: [[2,33],[12,71],[37,31]],
colors: colors,
options: options,
};
var chart1 = { // object definition (use as a template)
uid: "barChart",
primary: primaryData, //obj of primaryDataModel
drilldown: [drilldownDataUmmAlRumool, drilldownDataAlBarsha, drilldownDataWaselCenter, drilldownDataTasjeelAlQusais, drilldownDataDubaiDrivingCenter],
temp:null
	};
	$scope.charts = chart1;
	$scope.onClick = function(points, evt, barClicked){
		if (points.length!=0){
			if (barClicked){
				$scope.a="s";
				var setIndex = barClicked._index;;
				changeToDrilldown( setIndex); 
			}
		}
	}
	function changeToDrilldown(setIndex){
		if ($scope.charts.temp===null){ // check that this chart is not already in a drill down
					$scope.charts.temp = $scope.charts.primary;
					$scope.charts.primary = $scope.charts.drilldown[setIndex];
		}
	}
	$scope.backClick = function(evt){
		var chartId = evt.target.id;
				if ($scope.charts.temp!=null){
					$scope.charts.primary = $scope.charts.temp;
					$scope.charts.temp = null;
				}
			}
		
}]);

<!DOCTYPE html>
<html>
	<head>
		<script src="bower_componentsangularangular.min.js"></script>
		<script src="bower_componentschart.jsdistChart.min.js"></script>
		<script src="bower_componentsangular-chart.jsdistangular-chart.min.js"></script>
		<script src="ChartController.js"></script>
	</head>
	<body ng-app="app" ng-controller="ChartController">
	<canvas class="chart chart-bar" chart-data="charts.primary.data" chart-labels="charts.primary.labels" chart-options="charts.primary.options" 
		chart-series="charts.primary.series" chart-click="onClick" ></canvas>
	</body>
</html>

使用$timeout进行包装深入分析以触发摘要循环：

function changeToDrilldown(setIndex){
if ($scope.charts.temp===null){     
$timeout(function () {
$scope.charts.temp = $scope.charts.primary;
$scope.charts.primary = $scope.charts.drilldown[setIndex];
}, 0);
}
}

普伦克尔演示

相关内容

最新更新

热门标签：