Я пытаюсь создать гистограмму детализации на основе этого кода: https://shaynedcoder.wordpress.com/2016/10/14/angular-chart-drilldown/comment-page-1/#comment-10 Я создал объект с основной диаграммой, списком детализированных диаграмм и временной диаграммой. Директива диаграммы в шаблоне настроена на отображение данных, рядов и меток основной диаграммы. Что делает этот код, так это то, что он переключает основную диаграмму на диаграмму детализации. Я проверил с помощью хрома, что происходит переключение, но почему-то график вообще не меняется.
Вот шаблон:
А вот и мой контроллер
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_components\angular\angular.min.js"></script>
<script src="bower_components\chart.js\dist\Chart.min.js"></script>
<script src="bower_components\angular-chart.js\dist\angular-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>