Я хочу иметь горизонтальную гистограмму в моем приложении Angular (библиотека ng2-chart) с абсолютным значением столбца рядом с ним. Однако у меня возникают проблемы с отображением значения рядом с панелью. Смотрите скриншот ниже, прямо сейчас часть текста внутри бара, которого я не хочу.
HTML
<div style="padding: 10px;">
<canvas baseChart *ngIf="loaded"
[data]="barChartData"
[labels]="barChartLabels"
[chartType]="barChartType"
[options]="barChartOptions"
[colors]="barChartColors"
[legend]="barChartLegend">
</canvas>
</div>
TS
public barChartOptions: ChartOptions = {
responsive: true,
scales: {
xAxes: [{
display: false
}],
yAxes: [{
gridLines: {
display: false
}
}]
},
animation: {
duration: 1000,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.fillStyle = "#666";
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
console.log(meta)
var canvasWidth = meta.controller.chart.width;
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText('€ ' + formatNumber(data, 'be', '1.2-2'), canvasWidth, bar._model.y);
});
});
}
}
};
public barChartData: SingleDataSet = [1234, 543, 2134, 124, 644, 1640, 2340];
public barChartLabels: Label[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
public barChartType: ChartType = 'horizontalBar';
public barChartLegend = false;
public barChartColors: Color[] = [{ backgroundColor: 'rgb(31, 78, 120)' }]
Я также пытался в ctx.fillText сделать canvasWidth + 40, в В этом случае текст полностью находится рядом со строкой, но он отображается вне холста:
