I mostrando un gráfico donde se incluyen dos tipos. Ahora quiero ocultar la barra de herramientas para un conjunto de datos. Vi una discusión como esta en GitHub , pero esto no me lleva más lejos.
Aquí hay un ejemplo de mi gráfico:
Chart.defaults.global.legend.display = false; var ctx = document.getElementById("chart").getContext("2d"); var data = { labels: ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"], datasets: [ { label: "Test", type: 'bar', backgroundColor: "#F29220", borderColor: "#F29220", data: [4,1,1,2,2,2,2,2,2,2,2,1] }, { label: "Test2", type: 'bar', backgroundColor: "#F29220", borderColor: "#F29220", data: [4,0,0,0,0,0,0,0,0,0,0,0] }, { label: "", type: 'line', fillColor: "rgba(220,220,220,0)", pointColor: "rgba(220,220,220,0)", borderColor: "#FF0000", tooltip: false, data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100] }] }; var myBarChart = new Chart(ctx, { type: 'bar', data: data, options: { scales: { xAxes: [{ stacked: true, ticks: { fontColor: '#000', } }], yAxes: [{ stacked: true, ticks: { beginAtZero: true, fontColor: '#000', callback: function(label, index, labels) { return label + '%'; } }, }] }, elements: { point:{ radius: 0 } }, tooltips: { enabled: true, mode: 'single', callbacks: { label: function(tooltipItems, data) { return data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.yLabel + ' %'; } } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <canvas id="chart" width="740" height="370"></canvas>¿Cómo puedo ocultar la información sobre herramientas solo para el gráfico de líneas? Como puede ver en el código, ya intenté insertar el atributo "información sobre herramientas", pero esto no funciona.
Ahora hay una forma de configurar charjs para hacer esto ; simplemente use la propiedad de filtro:
tooltips: { filter: function (tooltipItem) { return tooltipItem.datasetIndex === 0; } }En la declaración del conjunto de datos, puede pasar un parámetro a cada uno de los conjuntos de datos que determina el radio de impacto ( pointHitRadius ) para el evento de desplazamiento. Si establece esto en 0, evitará que se inicie la información sobre herramientas.
noTipDataset = { label: "No Tooltips here", data: ..., pointHitRadius: 0, ...The rest of your data declaration here }PD: esto funciona en chartJS V2.6 pero no he probado versiones anteriores
Como ya concluyó, no hay una manera de configurar chart.js listo para usar para mostrar solo información sobre herramientas de conjuntos de datos específicos. Sin embargo, puede usar la interfaz del complemento para crear un complemento que pueda proporcionar esta funcionalidad.
Aquí hay un complemento que creé para su escenario que le permite configurar para qué conjuntos de datos desea que se muestre la información sobre herramientas.
Chart.plugins.register({ // need to manipulate tooltip visibility before its drawn (but after update) beforeDraw: function(chartInstance, easing) { // check and see if the plugin is active (its active if the option exists) if (chartInstance.config.options.tooltips.onlyShowForDatasetIndex) { // get the plugin configuration var tooltipsToDisplay = chartInstance.config.options.tooltips.onlyShowForDatasetIndex; // get the active tooltip (if there is one) var active = chartInstance.tooltip._active || []; // only manipulate the tooltip if its just about to be drawn if (active.length > 0) { // first check if the tooltip relates to a dataset index we don't want to show if (tooltipsToDisplay.indexOf(active[0]._datasetIndex) === -1) { // we don't want to show this tooltip so set it's opacity back to 0 // which causes the tooltip draw method to do nothing chartInstance.tooltip._model.opacity = 0; } } } } }); Con el nuevo complemento en su lugar, ahora puede usar una nueva propiedad en la configuración de información sobre tooltips llamada onlyShowForDatasetIndex que acepta una matriz de índices de conjuntos de datos para los que debería mostrarse la información sobre herramientas.
tooltips: { enabled: true, mode: 'single', // new property from our plugin // configure with an array of datasetIndexes that the tooltip should display for // to get the datasetIndex, just use it's position in the dataset [] above in the data property onlyShowForDatasetIndex: [0, 1], callbacks: { label: function(tooltipItems, data) { return data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.yLabel + ' %'; } } } Donde el valor del índice se asigna a la posición del conjunto de datos en la propiedad de conjuntos de datasets .
Eche un vistazo a este codepen para verlo en acción. Observe que la información sobre herramientas solo se muestra en los gráficos de barras pero no en la línea (ya que no incluimos este conjunto de datos en la nueva propiedad de configuración).