Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/370.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 角度图条形图上的JS数据标签_Javascript_Angularjs_Chart.js - Fatal编程技术网

Javascript 角度图条形图上的JS数据标签

Javascript 角度图条形图上的JS数据标签,javascript,angularjs,chart.js,Javascript,Angularjs,Chart.js,我正在尝试使用angular chartjs创建一个条形图,我需要一个在每个条形图上都可见的数据标签 例如: 我在js中尝试了以下代码: $scope.pendedLineCountOption = { series: ["series1", "series2"], options: { legend: { di

我正在尝试使用angular chartjs创建一个条形图,我需要一个在每个条形图上都可见的数据标签

例如:

我在js中尝试了以下代码:

 $scope.pendedLineCountOption = {
                    series: ["series1", "series2"],
                    options: {
                        legend: {
                            display: false
                        },
                        showTooltips: false,
                        animation: {
                            onComplete: function () {

                                var ctx = this.chart.ctx;
                                ctx.font = this.scales.font;
                                ctx.fillStyle = this.scales.textColor
                                ctx.textAlign = "center";
                                ctx.textBaseline = "bottom";

                                this.datasets.forEach(function (dataset) {
                                    dataset.bars.forEach(function (bar) {
                                        ctx.fillText(bar.value, bar.x, bar.y - 5);
                                    });
                                })
                            }
                        },
                    },
                    data: [[10, 20, 30]], // data array
                    labels: ["one", "two", "Three"], //array
                    header: "Header"
                };
Html代码如下所示:

 <canvas id="pended_bar" class="chart chart-bar" chart-data="pendedLineCountOption.data" chart-labels="pendedLineCountOption.labels" chart-options="pendedLineCountOption.options" chart-series="pendedLineCountOption.series" chart-legend="true"></canvas>

上面的代码给出了数据集未定义的错误。和数据标签不可见

请帮助。

尝试以下选项:

hover: {
    animationDuration: 0
},
animation: {
    onComplete: function () {
        var ctx = this.chart.ctx;
        var metaInfo = null;
        ctx.font = '12px "Helvetica Neue", Helvetica, Arial, sans-serif';
        ctx.fillStyle = 'gray';
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        _.forEach(this.config.data.datasets, function (dataset, i) {
            metaInfo = dataset._meta[Object.keys(dataset._meta)[i]];
            _.forEach(metaInfo.data, function (bar) {
                ctx.fillText(scope.data[bar._index], bar._model.x, bar._model.y);
            });
        })
    }
},
tooltips: {
    enabled: false
}
\uu
-洛达斯库(您可以像上面的代码一样使用
forEach

我使用的是
angularchart.js的1.1.1版