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