0
757
Viewschartjs-plugin-datalabels no se muestra en la barra horizontal apilada
Estoy tratando de hacer un gráfico de barras apiladas horizontal simple y agregarle etiquetas. No estoy seguro de lo que estoy haciendo mal aquí, cualquier aporte sería apreciado.
Puedo hacer que funcione degradando a una versión mucho más baja de chart.js y el complemento de etiqueta de datos.
Aquí hay un jsfiddle: https://jsfiddle.net/chrispret/szLgyu2j/24/
Y algo de código de prueba...
const testData = { set1: '4', set2: '3', set3: '1', set4: '3', }; const data = { labels: ["test"], datasets: [ { label: 'set1', data: [testData.set1], backgroundColor: 'red', datalabels: { anchor: 'center', align: 'center', } }, { label: 'set2', data: [testData.set2], backgroundColor: 'blue', datalabels: { anchor: 'center', align: 'center', } }, { label: 'set3', data: [testData.set3], backgroundColor: 'green', datalabels: { anchor: 'center', align: 'center', } }, { label: 'set4', data: [testData.set4], backgroundColor: 'gray', datalabels: { anchor: 'center', align: 'center', } } ] }; const config = { type: 'bar', data: data, options: { aspectRatio: 15 / 3, indexAxis: 'y', elements: { bar: { borderWidth: 2, } }, responsive: true, scales: { x: { stacked: true, }, y: { stacked: true } }, plugins: { datalabels: { color: 'white', font: { weight: 'bold' }, formatter: Math.round }, legend: { position: 'right', }, title: { display: true, text: 'Chart.js Horizontal Bar Chart' }, } }, }; const myChart = new Chart( document.getElementById('chartDemo'), config );2 answers
Answer question0
Desde la versión 1.x, el chartjs-plugin-datalabels ya no se registra automáticamente. Debe registrarse manualmente de forma global o local, como se describe aquí .
Por lo tanto, para que funcione, puede agregar la siguiente línea a su código antes de crear el gráfico.
Chart.register(ChartDataLabels);Eche un vistazo a su código modificado y vea cómo funciona.
const testData = { set1: '4', set2: '3', set3: '1', set4: '3', }; const data = { labels: ["test"], datasets: [{ label: 'set1', data: [testData.set1], backgroundColor: 'red' }, { label: 'set2', data: [testData.set2], backgroundColor: 'blue' }, { label: 'set3', data: [testData.set3], backgroundColor: 'green', datalabels: { anchor: 'center', align: 'center' } }, { label: 'set4', data: [testData.set4], backgroundColor: 'gray' } ] }; const config = { type: 'bar', data: data, options: { aspectRatio: 15 / 3, indexAxis: 'y', elements: { bar: { borderWidth: 2 } }, responsive: true, scales: { x: { stacked: true }, y: { stacked: true } }, plugins: { datalabels: { anchor: 'center', align: 'center', color: 'white', font: { weight: 'bold' }, formatter: Math.round }, legend: { position: 'right' }, title: { display: true, text: 'Chart.js Horizontal Bar Chart' }, } }, }; Chart.register(ChartDataLabels); const myChart = new Chart( document.getElementById('chartDemo'), config ); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script> <canvas id="chartDemo"></canvas>0
Agregue las etiquetas a la matriz de etiquetas.
const data = { labels: ["hrZone1","hrZone2","hrZone3","hrZone4"], datasets: [ { label: 'peak', data: [hrData.peak,0,0,0], backgroundColor: 'red' }, { label: 'cardio', data: [0,hrData.cardio,0,0], backgroundColor: 'blue' }, { label: 'fatBurn', data: [0,0,hrData.fatBurn,0], backgroundColor: 'green' }, { label: 'under', data: [0,0,0,hrData.under], backgroundColor: 'gray' } ] }; 