我做了很多测试,我无法把数据列,有人可以帮助我吗?
我只想数字出现在每个酒吧,我可以做它在其他类型的图表与datalabel插件
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gráficas</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@latest/dist/Chart.min.js"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<h1>Gráfica de Barras</h1>
<canvas id="grafica"></canvas>
<script src="ark.js"></script>
</body>
</html>
和ark.js.我已经改变了数千次的选项,我还没有能够看到该死的数字:-(
const $grafica = document.querySelector("#grafica");
const etiquetas = ["Mayo 22","Juni 22","Juli 22]
// Podemos tener varios conjuntos de datos
const Continuo = {
label: "Continuo",
data: [0, 0, 1000],
backgroundColor: 'rgba(54, 162, 235, 0.2)', // Color de fondo
borderColor: 'rgba(54, 162, 235, 1)', // Color del borde
borderWidth: 1,// Ancho del borde
datalabels: {Color: '#FFCE56'},
};
const Estatico = {
label: "Estático",
data: [1702, 2321, 6360],
backgroundColor: 'rgba(255, 159, 64, 0.2)',// Color de fondo
borderColor: 'rgba(255, 159, 64, 1)',// Color del borde
borderWidth: 1,// Ancho del borde
datalabels: {Color: '#FFCE56'},
};
new Chart($grafica, {
type: 'bar',// Tipo de gráfica
data: {
labels: etiquetas,
datasets: [
Continuo,
Estatico,
]
},
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
},
}
});
1条答案
按热度按时间ilmyapht1#
从1.x版本开始,Datalabels插件不再自动注册。它必须在全局或本地手动注册。
参见文档:https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#registration
您必须在全球注册:
或内联
此外,要注意的是,选项是大小写敏感的“颜色”选项不存在,但你应该改变“颜色”。