Actualmente estoy tratando de mostrar un texto almacenado en los datos en la información sobre herramientas, no puedo entender cómo hacer que funcione, he intentado muchas cosas.
Puede encontrar a continuación un ejemplo de lo que estoy tratando de hacer, quiero que se muestre el valor de "texto" al pasar el mouse sobre una de las barras.
probé esto
let data = [{ label: 'Available', backgroundColor: '#3366ff', data: [500], text : "test1" }, { label: 'Budget', backgroundColor: '#009999', data: [5000, 6500], text : "test2" }, { label: 'Actual', backgroundColor: '#92d400', data: [5200, 7245], text : "test3" }]; new Chart(document.getElementById("bar-chart-horizontal"), { type: 'horizontalBar', data: { labels: ["Rooms", "Guests"], datasets: data, }, options: { scales: { xAxes: [{ ticks: { beginAtZero: true } }] }, tooltips: { callbacks: { label: function(tooltipItem, data) { var item = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; return item.text; } } } } });Pero esto no funciona, ni siquiera muestra nada lógico, solo "Habitación" e "Invitados".
¿Qué debo hacer para recuperar la información correcta? Intenté hacerlo así: Fiddle
Pero no funciona cuando se aplica a mi código... Probablemente me estoy perdiendo algo bastante estúpido, pero no puedo entender qué.
Gracias a todas las personas que leerán esto y tratarán de ayudarme.
Solo necesita actualizar la versión de chart.js que está utilizando a la última versión V2 ya que V3 tiene cambios importantes.
También debe especificar la x para el número de una barra horizontal en lugar de ay tanto en el conjunto de datos como en la devolución de llamada de información sobre herramientas:
var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, { type: 'horizontalBar', data: { labels: ['2017/06/12', '2017/06/23', '2017/07/12', '2017/07/23', '2017/08/12', '2017/08/23', '2017/09/12'], datasets: [{ label: 'Values', data: [{ x: 12, value: 12, text: "test1" }, { x: 3, value: 13, text: "test2" }, { x: 1, value: 15, text: "test3" }, { x: -3, value: 5, text: "test4" }, { x: 67, value: 18, text: "test5" }, { x: 12, value: 11, text: "test6" }, { x: 13, value: 19, text: "test7" } ], fill: false, borderWidth: 2 }] }, options: { tooltips: { callbacks: { label: function(tooltipItem, data) { var item = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; return item.x + ' ' + item.value + item.text; } } }, responsive: true, maintainAspectRatio: false, scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); <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> </body>