由于 ctx.chart.scales['y-axis-0'].max
和 anchor
的位置都设置为 align
,我正在尝试向 end
添加 100 个。
请帮助我设置 ctx.chart.scales['y-axis-0'].max + 100
的值,即取 ctx.chart.scales['y-axis-0'].max
的当前值并加 100。
这样做的原因是:标签移动到条形图之外,无法看到。增加最大值将有助于显示标签。
createChart(chartId, chartType, chartData, options = null) {
var ctx = document.getElementById(chartId);
return new Chart(ctx, {
type: chartType,
data:
{
labels: ["Not Attempted", "Fail", "Pass"],
datasets: [
{
backgroundColor: ["lightgray", "#ff8175", "#84efa5"],
data: [app.others, app.fail, app.pass]
}
]
},
options: options
});
},
createMonthlyBarChart() {
var _max = 0;
var chartOptions = {
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
formatter: (value, ctx) => {
_max = ctx.chart.scales['y-axis-0'].max;
var sum = 0;
ctx.chart.data.datasets[0].data.map(data => { sum += data; });
return value + " (" + (value * 100 / sum).toFixed(1) + "%)";
}
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: _max + 10 //this does not work.
}
}]
}
}
app.monthlyBarChart = app.createChart('monthlyBarChart', 'bar', chartData, chartOptions);