angular 图表中显示未定义的图例
Legend showing undefined in angular chart
我正在使用 angular-chart.js 在我的应用程序中绘制图表。但我面临一个问题。图表图例显示 未定义 而不是标签。
我的js代码:
$scope.labels_std = ['Total Students', 'Submitted fee', 'Has to submit'];
$scope.options = {legend: {display: true, position: 'bottom'}};
$scope.colors = ['#4D5360', '#949FB1', '#97BBCD'];
$scope.data_std = [
$scope.allCount.students,
$scope.allCount.fees,
$scope.allCount.students - $scope.allCount.fees
];
标记为:
<canvas id="bar" class="chart chart-bar" chart-labels="labels_std" chart-data="data_std" chart-colors="colors" chart-options="options"></canvas>
但是结果是这样的:
它显示 undefined
因为您还没有为数据集定义 label
属性。
您需要在 $scope.datasetOverride
模型中为每个数据集设置 label
属性。另外,在您的视图标记中为其添加指令。
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ
var app = angular.module('app', ['chart.js']);
app.controller("BarCtrl", function($scope) {
$scope.labels = ['Total Students', 'Submitted fee', 'Has to submit'];
$scope.colors = ['#4D5360', '#949FB1', '#97BBCD'];
$scope.std = 65, $scope.fee = 59, $scope.nfee = 80;
$scope.data = [
[$scope.std, $scope.fee, $scope.nfee],
[$scope.std, $scope.fee, $scope.nfee],
[$scope.std, $scope.fee, $scope.nfee]
];
$scope.options = {
legend: {
display: true
}
}
$scope.datasetOverride = [{
label: 'My First Dataset'
}, {
label: 'My Second Dataset'
}, {
label: 'My Third Dataset'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<div ng-app="app" ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-colors="colors" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride"></canvas>
</div>
我通过我曾经在互联网上找到的一个函数解决了这个问题,该函数寻找图例标签上的省略号。
您只需从您的选项->图例对象中调用该函数
$scope.labels_std = ['Total Students', 'Submitted fee', 'Has to submit'];
$scope.options = {legend: {
display: true,
position: 'bottom',
labels: {
generateLabels: function(chart){
var dataset = chart.data.datasets[0];
var arcOpts = chart.options.elements.arc;
//iterate the labels to return legend item interface
return chart.data.labels.map(function(label, i) {
return {
text: label,
//lines below to emulate the default legend behaviour
fillStyle: Chart.helpers.getValueAtIndexOrDefault(dataset.backgroundColor, i , arcOpts.backgroundColor),
strokeStyle: Chart.helpers.getValueAtIndexOrDefault(dataset.borderColor, i , arcOpts.borderColor),
lineWidth: Chart.helpers.getValueAtIndexOrDefault(dataset.borderWidth, i , arcOpts.borderWidth),
hidden: isNaN(dataset.data[i]) || chart.getDatasetMeta(0).data[i].hidden,
index: i
};
});
}
}
}};
$scope.colors = ['#4D5360', '#949FB1', '#97BBCD'];
$scope.data_std = [
$scope.allCount.students,
$scope.allCount.fees,
$scope.allCount.students - $scope.allCount.fees
];
我正在使用 angular-chart.js 在我的应用程序中绘制图表。但我面临一个问题。图表图例显示 未定义 而不是标签。
我的js代码:
$scope.labels_std = ['Total Students', 'Submitted fee', 'Has to submit'];
$scope.options = {legend: {display: true, position: 'bottom'}};
$scope.colors = ['#4D5360', '#949FB1', '#97BBCD'];
$scope.data_std = [
$scope.allCount.students,
$scope.allCount.fees,
$scope.allCount.students - $scope.allCount.fees
];
标记为:
<canvas id="bar" class="chart chart-bar" chart-labels="labels_std" chart-data="data_std" chart-colors="colors" chart-options="options"></canvas>
但是结果是这样的:
它显示 undefined
因为您还没有为数据集定义 label
属性。
您需要在 $scope.datasetOverride
模型中为每个数据集设置 label
属性。另外,在您的视图标记中为其添加指令。
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ
var app = angular.module('app', ['chart.js']);
app.controller("BarCtrl", function($scope) {
$scope.labels = ['Total Students', 'Submitted fee', 'Has to submit'];
$scope.colors = ['#4D5360', '#949FB1', '#97BBCD'];
$scope.std = 65, $scope.fee = 59, $scope.nfee = 80;
$scope.data = [
[$scope.std, $scope.fee, $scope.nfee],
[$scope.std, $scope.fee, $scope.nfee],
[$scope.std, $scope.fee, $scope.nfee]
];
$scope.options = {
legend: {
display: true
}
}
$scope.datasetOverride = [{
label: 'My First Dataset'
}, {
label: 'My Second Dataset'
}, {
label: 'My Third Dataset'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<div ng-app="app" ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-colors="colors" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride"></canvas>
</div>
我通过我曾经在互联网上找到的一个函数解决了这个问题,该函数寻找图例标签上的省略号。
您只需从您的选项->图例对象中调用该函数
$scope.labels_std = ['Total Students', 'Submitted fee', 'Has to submit'];
$scope.options = {legend: {
display: true,
position: 'bottom',
labels: {
generateLabels: function(chart){
var dataset = chart.data.datasets[0];
var arcOpts = chart.options.elements.arc;
//iterate the labels to return legend item interface
return chart.data.labels.map(function(label, i) {
return {
text: label,
//lines below to emulate the default legend behaviour
fillStyle: Chart.helpers.getValueAtIndexOrDefault(dataset.backgroundColor, i , arcOpts.backgroundColor),
strokeStyle: Chart.helpers.getValueAtIndexOrDefault(dataset.borderColor, i , arcOpts.borderColor),
lineWidth: Chart.helpers.getValueAtIndexOrDefault(dataset.borderWidth, i , arcOpts.borderWidth),
hidden: isNaN(dataset.data[i]) || chart.getDatasetMeta(0).data[i].hidden,
index: i
};
});
}
}
}};
$scope.colors = ['#4D5360', '#949FB1', '#97BBCD'];
$scope.data_std = [
$scope.allCount.students,
$scope.allCount.fees,
$scope.allCount.students - $scope.allCount.fees
];