我正在开发一个 angular 应用程序并使用 chartsjs 和 chartjs-plugin-datalable，以便我可以构建水平条。
但是，有些数据是隐藏的，我无法解决。
这是配置代码
this.dataFill = {
title: {
display: false
},
legend: {
position: 'right',
display: false
},
scales: {
xAxes: [
{
ticks: {
beginAtZero: true,
},
display: false,
}
],
yAxes: [
{ display: false}
]
},
responsive: true,
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
rotation: 0,
padding: 12,
labels: {
value: {
color: '#000'
}
},
font: {
size: '12',
weight: 'bold'
}
},
}
}
您可以编写一个模仿gracev3 中引入的选项的自定义插件，这样您就可以确保您的数据标签始终可见：
Chart.plugins.register(ChartDataLabels);
var options = {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 20, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
title: {
display: false
},
legend: {
position: 'right',
display: false
},
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
},
//display: false,
}],
yAxes: [{
display: false
}]
},
responsive: true,
plugins: {
grace: {
// grace: '10%', // add percentage of max and min to scale
grace: 2, // add fixed number to min and max of scale
hardMax: true // set suggestedMin/max or hard min/max
},
datalabels: {
anchor: 'end',
align: 'end',
clamp: true,
rotation: 0,
padding: 12,
labels: {
clamp: true,
value: {
color: '#000'
}
},
font: {
size: '12',
weight: 'bold'
}
},
}
},
plugins: [{
id: "grace",
beforeLayout: (chart, options, c) => {
let max = Number.MIN_VALUE;
let min = Number.MAX_VALUE;
let grace = options.grace || 0;
let hardMax = options.hardMax || false;
chart.data.datasets.forEach((dataset) => {
max = Math.max(max, Math.max(...dataset.data));
min = Math.min(min, Math.min(...dataset.data));
})
if (typeof grace === 'string' && grace.includes('%')) {
grace = Number(grace.replace('%', '')) / 100;
chart.options.scales.xAxes.forEach((axe) => {
if (hardMax) {
axe.ticks.max = max + (max * grace);
axe.ticks.min = min - (min * grace);
} else {
axe.ticks.suggestedMax = max + (max * grace);
axe.ticks.suggestedMin = min - (min * grace);
}
})
} else if (typeof grace === 'number') {
chart.options.scales.xAxes.forEach((axe) => {
if (hardMax) {
axe.ticks.max = max + grace;
axe.ticks.min = min - grace;
} else {
axe.ticks.suggestedMax = max + grace;
axe.ticks.suggestedMin = min - grace;
}
})
}
}
}]
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/1.0.0/chartjs-plugin-datalabels.js"></script>
</body>将hardMax自定义插件的选项设置为 false 最终会导致更大的空白，因为它会优先考虑漂亮的刻度间距，将此选项设置为 true 并且条形有更多空间，但最后一个刻度空间有点偏离
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句