Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

369
Vistas
¿Toda la información sobre herramientas siempre visible en react-google-charts en la carga de la página?

¿Hay alguna manera de mostrar toda la información sobre herramientas sin la necesidad de pasar el mouse por encima o seleccionar una sección en un gráfico de reacción de Google?

Se las arregló para que funcionara con los gráficos de Google (pureJS), pero no puedo encontrar una manera de usar lo mismo en react-google-charts.

 google.load('visualization', '1.0', { 'packages': ['corechart'] }); google.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = { 'title': 'How Much Pizza I Ate Last Night', 'width': 400, 'height': 300, tooltip: { trigger: 'selection', /* isHtml: true */ } }; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); google.visualization.events.addListener(chart, 'ready', function(e) { chart.setSelection([{ row: 0, column: null }, { row: 1, column: null }, { row: 2, column: null }, { row: 3, column: null }, { row: 4, column: null }]); }); chart.draw(data, options); }; <div id="chart_div"></div> .chart { background-color: #eee; }

https://jsfiddle.net/dahlin/cfpyu9m5/11/

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Prueba esto,

 import React from "react"; import { Chart } from "react-google-charts"; export const data = [ ["Task", "Hours per Day"], ["Work", 11], ["Eat", 2], ["Commute", 2], ["Watch TV", 2], ["Sleep", 7] ]; export const options = { title: "My Daily Activities", tooltip: { trigger: "selection" } }; export default function App() { return ( <Chart chartType="PieChart" data={data} options={options} width={"100%"} height={"400px"} chartEvents={[ { eventName: "ready", callback: ({ chartWrapper, google }) => { const chart = chartWrapper.getChart(); chart.setSelection([ { row: 0, column: null }, { row: 1, column: null }, { row: 2, column: null }, { row: 3, column: null }, { row: 4, column: null } ]); } } ]} /> ); }

Código de trabajo aquí Ver la página de sandbox

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda