我看不到bars charts.js上的数据标签

b09cbbtk  于 2023-04-20  发布在  Chart.js
关注(0)|答案(1)|浏览(189)

我做了很多测试,我无法把数据列,有人可以帮助我吗?
我只想数字出现在每个酒吧,我可以做它在其他类型的图表与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                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
            }],                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
        },                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
    }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
});
ilmyapht

ilmyapht1#

从1.x版本开始,Datalabels插件不再自动注册。它必须在全局或本地手动注册。
参见文档:https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#registration
您必须在全球注册:

// Register the plugin to all charts:
Chart.register(ChartDataLabels);

或内联

// OR only to specific charts:
var chart = new Chart(ctx, {
  plugins: [ChartDataLabels],
  options: {
    // ...
  }
})

此外,要注意的是,选项是大小写敏感的“颜色”选项不存在,但你应该改变“颜色”。

相关问题