0
255
Vistascómo resaltar la barra de pila en ChartJS con onclick
¿Es posible seleccionar una columna en un gráfico de barras de pila con un borde de color? Como esto
Empecé desde aquí: https://jsfiddle.net/sdfx/hwx9awgn/
// Return with commas in between var numberWithCommas = function(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }; var dataPack1 = [40, 47, 44, 38, 27, 31, 25]; var dataPack2 = [10, 12, 7, 5, 4, 6, 8]; var dataPack3 = [17, 11, 22, 18, 12, 7, 5]; var dates = ["SN 1.0.1", "SN 1.0.2", "SN 1.0.3", "SN 1.0.4", "SN 1.0.5", "SN 2.0.0", "SN 2.0.1"]; // Chart.defaults.global.elements.rectangle.backgroundColor = '#FF0000'; var bar_ctx = document.getElementById('bar-chart'); var bar_chart = new Chart(bar_ctx, { type: 'bar', data: { labels: dates, datasets: [{ label: 'Bad Style', data: dataPack1, backgroundColor: "#512DA8", hoverBackgroundColor: "#7E57C2", hoverBorderWidth: 0 }, { label: 'Warning', data: dataPack2, backgroundColor: "#FFA000", hoverBackgroundColor: "#FFCA28", hoverBorderWidth: 0 }, { label: 'Error', data: dataPack3, backgroundColor: "#D32F2F", hoverBackgroundColor: "#EF5350", hoverBorderWidth: 0 }, ] }, options: { animation: { duration: 10, }, tooltips: { mode: 'label', callbacks: { label: function(tooltipItem, data) { return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel); } } }, scales: { xAxes: [{ stacked: true, gridLines: { display: false }, }], yAxes: [{ stacked: true, ticks: { callback: function(value) { return numberWithCommas(value); }, }, }], }, // scales legend: {display: true} } // options } );3 Respuestas
Responde la pregunta0
Sí, lo que puede hacer es onClick como segundo argumento, obtiene una matriz con todos los elementos activos. Entonces, lo que puede hacer es recorrer cada conjunto de datos en su gráfico y ver si el índice coincide con uno de la lista con elementos activos.
Si este es el caso, le asigna un borderWidth de 1, de lo contrario, lo pone en 0. Después de hacer esto, llama a chart variable.update();
Para que esto funcione, debe eliminar el ancho de borde flotante de todos los conjuntos de datos y darle a todos los conjuntos de datos un borderColor de color amarillo.
0
Utilice el atributo borderColor con una matriz y borderWith con un objeto.
datasets: [ { label: 'Bad Style', data: dataPack1, backgroundColor: "#512DA8", borderColor: [ 'rgb(243, 255, 51)', 'rgb(81,45,168)', 'rgb(243, 255, 51)', 'rgb(81,45,168)', 'rgb(81,45,168)', 'rgb(81,45,168)', 'rgb(81,45,168)', ], borderWidth: { top: 0, right: 4, bottom: 0, left: 4 }, },rgb (243, 255, 51) es de color amarillo.
0
Para cambiar el color, prueba esto:
var borderColor = [ 'rgb(81,45,168)', 'rgb(81,45,168)', 'rgb(81,45,168)', 'rgb(81,45,168)', 'rgb(81,45,168)', 'rgb(81,45,168)', 'rgb(81,45,168)', ]; var bar_ctx = document.getElementById('bar-chart'); var bar_chart = new Chart(bar_ctx, { type: 'bar', data: { labels: dates, datasets: [ { label: 'Bad Style', data: dataPack1, backgroundColor: "#512DA8", hoverBackgroundColor: "#7E57C2", hoverBorderWidth: 0, borderColor: borderColor, borderWidth: '4', }, { label: 'Warning', data: dataPack2, backgroundColor: "#FFA000", hoverBackgroundColor: "#FFCA28", hoverBorderWidth: 0, borderColor: borderColor, borderWidth: '4', }, { label: 'Error', data: dataPack3, backgroundColor: "#D32F2F", hoverBackgroundColor: "#EF5350", hoverBorderWidth: 0, borderColor: borderColor, borderWidth: '4', }, ] }, options: { onClick: function(e){ var element = this.getElementAtEvent(e); borderColor[element[0]._index] = 'rgb(244,140,4)'; this.update(); }, animation: { duration: 10, }, tooltips: { mode: 'label', callbacks: { label: function(tooltipItem, data) { return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel); } } }, scales: { xAxes: [{ stacked: true, gridLines: { display: false }, }], yAxes: [{ stacked: true, ticks: { callback: function(value) { return numberWithCommas(value); }, }, }], }, // scales legend: {display: true} } // options } );