0
198
Visualizações¿Cómo configurar estilos personalizados al pasar el mouse sobre el gráfico de barras?
Puedo configurar la selección de mis gráficos de barras con el método setSelection. Puedes ver esto en el siguiente GIF.
Quiero que las líneas blancas de la imagen sean más gruesas. Básicamente, quiero aplicar un estilo personalizado cuando se selecciona una barra. No pude encontrarlo en la documentación de la API .
1 Respostas
Responde à pergunta0
no es posible diseñar la selección usando las opciones estándar proporcionadas por google
pero podemos aplicar nuestro propio css personalizado
las barras se dibujan usando elementos SVG <rect>
por lo que primero debemos identificar los atributos que podemos usar para aislar las barras seleccionadas
utilizando el inspector de elementos en las herramientas de desarrollo,
parece que podemos identificar las barras seleccionadas usando el siguiente selector...
rect[fill-opacity="0"]:not([stroke="none"])con el que podemos aplicar css personalizado...
rect[fill-opacity="0"]:not([stroke="none"]) { stroke: cyan; stroke-width: 8px; }ver siguiente fragmento de trabajo...
google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = new google.visualization.arrayToDataTable([ ['x', 'y0', 'y1', 'y2'], [2010, 4, 2, 10] ]); var container = document.getElementById('chart'); var chart = new google.visualization.ColumnChart(container); // select first column when chart is drawn google.visualization.events.addListener(chart, 'ready', function () { chart.setSelection([{row: 0, column: 1}]); }); chart.draw(data); }); rect[fill-opacity="0"]:not([stroke="none"]) { stroke: cyan; stroke-width: 8px; } <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart"></div>