web-dev-qa-db-fra.com

Puis-je personnaliser le texte de l'info-bulle dans un tableau Google Geochart?

Vous trouverez ci-dessous le code que j'utilise, sur la base de Comment j'ai trouvé dans la documentation de Google , mais je ne suis pas sûr que cela s'applique au Geocart , si je ' m le faisait bien, ou s'il y a une autre façon de le faire pour un géocarte.

Ce code fonctionne bien si je n'inclut pas la colonne de l'info-bulle. Quand je le fais, je reçois l'erreur "Tableau de données incompatible: Erreur: la table contient plus de colonnes que prévu (en attente de 2 colonnes)," affichée où le Geochart devrait être.

Cette question aborde le même problème, mais pas spécifiquement pour un Geochart.

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>

    google.load( 'visualization', '1', { 'packages': ['geochart'] } );
    google.setOnLoadCallback( drawRegionsMap );

    function drawRegionsMap()
    {

        var data = google.visualization.arrayToDataTable([
            [ 'State', 'Relevance', {type: 'string', role: 'tooltip'} ],
            [ 'Alabama', 3, 'tooltip test text' ],
            [ 'Arizona', 1, 'tooltip test text' ],
        ]);

        var options =
        {
            region:         'US',
            resolution:     'provinces',
        };

        var chart = new google.visualization.GeoChart( document.getElementById( 'chart_div' ) );
        chart.draw( data, options );

    };

</script>
apigoogle-visualization
18
T. Brian Jones

Il semble que cela soit impossible de formater le texte de la manière exacte que je tentais avec l'outil Geochart. Vous trouverez ci-dessous la solution que j'ai enfin proposée et la carte rendue:

Carte rendue avec vue ToolTip

enter image description here

code PHP & JavaScript

<!-- generate geo map -->
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>

    google.load( 'visualization', '1', { 'packages': ['geochart'] } );
    google.setOnLoadCallback( drawRegionsMap );

    function drawRegionsMap()
    {

        // create data table
        var data = google.visualization.arrayToDataTable([
            <?php echo $data_table; ?>
        ]);

        // create chart object
        var chart = new google.visualization.GeoChart(
            document.getElementById( 'chart_div' )
        );

        // defines the data for the tooltip
        var formatter = new google.visualization.PatternFormat('{0}');
        formatter.format( data, [0,1], 1 );
        var formatter = new google.visualization.PatternFormat('{2}');
        formatter.format( data, [0,1,2], 0 );

        // defines the data for the chart values
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);

        // set options for this chart
        var options =
        {
            width:          <?php echo $width; ?>,
            region:         'US',
            resolution:     'provinces',
            colorAxis: { colors: ['#abdfab', '#006600'] },
            legend: 'none'
        };

        // draw chart
        chart.draw( view, options );

    };

</script>

<div id="chart_div" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;"></div>

HTML rend

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>

    google.load( 'visualization', '1', { 'packages': ['geochart'] } );
    google.setOnLoadCallback( drawRegionsMap );

    function drawRegionsMap()
    {

        // create data table
        var data = google.visualization.arrayToDataTable([
            [ 'State', 'in', 'String' ],
            [ 'Arizona', 2, 'Has Facility, Sells Direct' ],
            [ 'California', 4, 'Has Facility, Has Distributor, Sells Direct' ],
            [ 'Colorado', 1, 'Sells Direct' ],
            [ 'Florida', 1, 'Has Distributor' ],
            [ 'Georgia', 1, 'Has Distributor' ],
            [ 'Idaho', 1, 'Sells Direct' ],
            [ 'Illinois', 1, 'Has Distributor' ],
            [ 'Indiana', 1, 'Has Distributor' ],
            [ 'Iowa', 1, 'Has Distributor' ],
            [ 'Kansas', 1, 'Has Distributor' ],
            [ 'Kentucky', 1, 'Has Distributor' ],
            [ 'Louisiana', 1, 'Has Distributor' ],
            [ 'Maryland', 2, 'Has Distributor' ],
            [ 'Montana', 1, 'Sells Direct' ],
            [ 'Nevada', 2, 'Has Facility, Sells Direct' ],
            [ 'New Mexico', 2, 'Has Facility, Sells Direct' ],
            [ 'North Carolina', 1, 'Has Distributor' ],
            [ 'North Dakota', 1, 'Has Distributor' ],
            [ 'Oklahoma', 1, 'Sells Direct' ],
            [ 'Oregon', 1, 'Sells Direct' ],
            [ 'Pennsylvania', 1, 'Has Distributor' ],
            [ 'South Carolina', 1, 'Has Distributor' ],
            [ 'Tennessee', 1, 'Has Distributor' ],
            [ 'Texas', 1, 'Has Distributor' ],
            [ 'Utah', 2, 'Has Facility, Sells Direct' ],
            [ 'Washington', 1, 'Sells Direct' ],
            [ 'Wyoming', 1, 'Sells Direct' ],       ]);

        // create chart object
        var chart = new google.visualization.GeoChart(
            document.getElementById( 'chart_div' )
        );

        // defines the data for the tooltip
        var formatter = new google.visualization.PatternFormat('{0}');
        formatter.format( data, [0,1], 1 );
        var formatter = new google.visualization.PatternFormat('{2}');
        formatter.format( data, [0,1,2], 0 );

        // defines the data for the chart values
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);

        // set options for this chart
        var options =
        {
            width:          286,
            region:         'US',
            resolution:     'provinces',
            colorAxis: { colors: ['#abdfab', '#006600'] },
            legend: 'none'
        };

        // draw chart
        chart.draw( view, options );

    };

</script>

<div id="chart_div" style="width: 286px; height: 180px;"></div>
3
T. Brian Jones

J'ai pu inclure le texte que je voulais dans l'info-bulle, y compris les valeurs de cette façon:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Country'); // Implicit domain label col.
data.addColumn('number', 'Value'); // Implicit series 1 data col.
data.addColumn({type:'string', role:'tooltip'}); // 

data.addRows([

    [{v:"US",f:"United States of America"},1,"21% of Visits"],

    [{v:"GB",f:"United Kingdom"},2,"7% of visits"],

    [{v:"DE",f:"Germany"},3,"6% of visits"],

    [{v:"FR",f:"France"},4,"5% of visits"],

    [{v:"ES",f:"Spain"},5,"5% of visits"],

    [{v:"CA",f:"Canada"},6,"4% of visits"],

    [{v:"IT",f:"Italy"},7,"4% of visits"],

    [{v:"NL",f:"The Netherlands"},8,"4% of visits"],

    [{v:"BR",f:"Brazil"},9,"4% of visits"],

    [{v:"TR",f:"Turkey"},10,"3% of visits"],

    [{v:"IN",f:"India"},11,"3% of visits"],

    [{v:"RU",f:"Russia"},12,"3% of visits"],

    [{v:"AU",f:"Australia"},13,"2% of visits"],

]);

De cette façon, par exemple "États-Unis d'Amérique" serait la ligne 1 de l'info-bulle et "21% des visites" serait la deuxième ligne. Avec ce format, je peux inclure le texte que je souhaite dans l'info-bulle, dans les deux lignes.

21
CMoreira

Afin de personnaliser l'info-bulle pour utiliser HTML, y compris de nouvelles lignes/images, cochez cet exemple: http://jsfiddle.net/sd4ka/

    google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Value', {role: 'tooltip', p:{html:true}}],
        ['Russia', 5, 'Hello world<br>test'],
        ['US', 20, '<img src="https://www.google.com/images/srpr/logo6w.png"/>']]);
    var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
    chart.draw(data, {
        width: 800,
        height: 600,
        tooltip: {
            isHtml: true
        }
    });
}

Depuis V1.1 Geochart prend en charge HTML pour les info-bulles

20
Radu

Il existe trois alternatives présentées dans ce fil

  • Définissez la valeur formatée de vos points de données manuellement (à l'aide de la méthode #-SetformattedValue () DataTable )
  • Utilisez l'un des formateurs sur une colonne de données
  • Inclure une colonne de rôle '- info-bulletips dans le jeu de données

J'ai personnellement utilisé en premier, et avec votre exemple devrait être comme

var data = google.visualization.arrayToDataTable([
    [ 'State', 'Relevance' ],
    [ 'Alabama', { v: 3, f: 'tooltip test text' } ],
    [ 'Arizona', { v: 1, f: 'tooltip test text' } ],
]);
8
fglez

J'ai rencontré un problème similaire pour un tableau de dispersion. Je devais utiliser arrayToDataTable pour obtenir les données dans le tableau par opposition à DataTable() et addColumn() comme suggéré dans d'autres réponses.

Afin de le faire fonctionner, vous apportez l'appel à arrrayToDataTable() Comme vous le faites actuellement et enregistrez-vous sur les données variables.

Ensuite, vous devez spécifier la colonne que vous souhaitez traiter comme une info-bulle (et vous devez spécifier quelles colonnes doivent être complotées). Dans l'exemple suivant, les colonnes 0 et 1 contiennent les données de la parcelle et la colonne 2 contient les chaînes de l'info-bulle.

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {sourceColumn: 2,role:'tooltip'}]);

Enfin, vous devez appeler l'appel à dessiner avec la variable d'affichage plutôt qu'avec la variable de données:

chart.draw(view, options);
6
meirmsn