Javascript 显示角度图中未定义的图例

我正在使用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>

但结果是：

---

它显示的是

未定义的

，因为您尚未为数据集定义

标签

属性

您需要为每个数据集在

$scope.datasetOverride

模型内设置

label

属性。另外，在视图标记中为其添加指令

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

var-app=angular.module（'app'，['chart.js']）；
应用程序控制器（“BarCtrl”，函数（$scope）{
$scope.labels=[“学生总数”、“提交费用”、“必须提交”]；
$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={
图例：{
显示：真
}
}
$scope.datasetOverride=[{
标签：“我的第一个数据集”
}, {
标签：“我的第二个数据集”
}, {
标签：“我的第三个数据集”
}];
});
我曾经在互联网上找到一个函数，在图例标签上查找省略号，然后通过该函数解决了这个问题

您只需从选项->图例对象调用函数即可

$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
];

您能否在问题所在的位置添加工作示例。另外，在现有代码中，
$scope.series
在哪里？我添加了该系列，但它不起作用，而是添加了一些插件，以便更容易调试。我认为您在html标记和添加
$scope.series
中缺少了
chart series=“series”
，但在饼图中，即使我没有添加“datasetOverride”，它也可以正常工作这是因为饼图不使用
标签
属性来显示
图例
s。它显示标签数组中每个标签的图例。我尝试过你的方法，但没有解决我的问题。。显示未定义如何设置？添加指令？