0
408
VistasChart.js: cómo ordenar la información sobre herramientas en el gráfico
Genero un gráfico donde tengo 3 grupos de datos:
- abajo
- medio
- parte superior
Cada barra tiene los valores superiores en la parte superior de la barra, luego el valor medio y luego el valor inferior.
Cuando Chart.js muestra la información sobre herramientas, primero tengo el valor inferior, luego el medio y el superior. Entonces, es al revés del orden en la barra.
Para mostrar los valores, agregué este código.
var stackedBarChartOptions = { responsive: true, maintainAspectRatio: false, tooltips: { mode: 'label', callbacks: { label: function (tooltipItem, data) { return data.datasets[tooltipItem.datasetIndex].label + ": " + tooltipItem.yLabel; } } } }¿Es posible pedir la lista de información sobre herramientas?
1 Respuestas
Responde la pregunta0
en la devolución de llamada de la label de información sobre herramientas, podemos elegir cualquier índice para mostrar.
en su devolución de llamada, está mostrando el índice pasado a la devolución de llamada.
tooltipItem.datasetIndexen su lugar, mostremos el orden inverso...
data.datasets.length - 1 - tooltipItem.datasetIndex pero también tendremos que agregar la devolución de llamada para labelColor ,
para mostrar el cuadro de color correcto para la etiqueta específica.
ver siguiente fragmento de trabajo...
var chart_canvas = document.getElementById('myChart'); var stackedLine = new Chart(chart_canvas, { type: 'bar', data: { labels: ['A'], fill: true, datasets: [ { label: 'Low', data: [67.8], backgroundColor: '#D6E9C6' }, { label: 'Moderate', data: [20.7], backgroundColor: '#FAEBCC' }, { label: 'High', data: [11.4], backgroundColor: '#EBCCD1' } ] }, options: { responsive: true, maintainAspectRatio: false, tooltips: { mode: 'label', callbacks: { labelColor: function (tooltipItem, data) { return {backgroundColor: data.data.datasets[data.data.datasets.length - 1 - tooltipItem.datasetIndex].backgroundColor}; }, label: function (tooltipItem, data) { return data.datasets[data.datasets.length - 1 - tooltipItem.datasetIndex].label + ": " + data.datasets[data.datasets.length - 1 - tooltipItem.datasetIndex].data[tooltipItem.index]; } } }, scales: { xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script> <canvas id="myChart"></canvas>