Application d'une classe à une étiquette de graphique à barres Google

Question

var options = { 
     width: "100%", 
     legend: 'none', 
     backgroundColor: { fill: 'transparent' }, 
     chartArea: { width: '80%' }, 
     bar: { groupWidth: "50%" }, 
     animation: { "startup": true, duration: 1000, easing: 'in' }, 
     colors: ['#529736', '#007DB9', '#EC1C24'], 
     fontSize: 10, 
     hAxis: { 
      direction: 1, 
      title: 'Database' 
     }, 
     vAxis: { 
      title: 'Percent Of Successful Intervals', 
      minValue: 75, 
      format: '#', 
      ticks: [75, 80, 85, 90, 95, 100] 
     } 
    }; 

var table = new google.visualization.DataTable(); 
      table.addColumn('string', 'Database'); 
      table.addColumn('number', 'Percent of Successful Intervals'); 
      table.addColumn({ type: 'string', role: 'tooltip' }); 
      table.addColumn({ type: 'string', role: 'style' }); 


        table.addRows([[ 
        graphLabel, 
        percentRNI, 
        "Percentage: " + data.d[iCnt].RNIPct + "%\nRecords: " + data.d[iCnt].RNIRecordCount, 
        'fill-color: ' + getColor(percentRNI) 
        ]]); 

        table.addRows([[ 
        "LDA", 
        percentLDA, 
        "Percentage: " + data.d[iCnt].LDAPct + "%\nRecords: " + data.d[iCnt].LDARecordCount, 
        'fill-color: ' + getColor(percentLDA) 
        ]]); 

chart.draw(table, options); 

J'ai un Google Bar Chart avec des étiquettes de barres auxquelles j'essaie d'ajouter dynamiquement une classe. Cependant, je n'ai pas réussi à trouver un moyen de référencer les étiquettes ou d'ajouter la classe. Le graphique est créé à partir d'une base de données Google que je construis.

Voici ce que je suis en train d'accomplir:

Je me sens comme cela devrait être simple, mais je n'ai pas pu trouver quoi que ce soit dans la documentation. Quelqu'un a la réponse?

Answer 1

les étiquettes sont svg <text> éléments, créés par le tableau

vous pouvez appliquer css à tous <text> éléments,
mais cela comprendrait plus que les étiquettes que vous spécifiez

à la place, vous recommandons d'utiliser la suivant les options de graphique pour le style des étiquettes ...

 hAxis: { 
     textStyle: { 
      color: <string>, 
      fontName: <string>, 
      fontSize: <number>, 
      bold: <boolean>, 
      italic: <boolean> 
     } 
     }, 

---

mais pas recommandé, vous pouvez modifier manuellement le svg,
après de tableau 'ready' ou 'animationfinish' les événement se déclenche

voir ci-dessous extrait de travail ...

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'y'], 
 
    ['RNI', 97], 
 
    ['LDA', 100] 
 
    ]); 
 

 
    var options = { 
 
    width: "100%", 
 
    legend: 'none', 
 
    backgroundColor: { fill: 'transparent' }, 
 
    chartArea: { width: '80%' }, 
 
    bar: { groupWidth: "50%" }, 
 
    animation: { "startup": true, duration: 1000, easing: 'in' }, 
 
    colors: ['#529736', '#007DB9', '#EC1C24'], 
 
    fontSize: 10, 
 
    hAxis: { 
 
     direction: 1, 
 
     title: 'Database' 
 
    }, 
 
    vAxis: { 
 
     title: 'Percent Of Successful Intervals', 
 
     minValue: 75, 
 
     format: '#', 
 
     ticks: [75, 80, 85, 90, 95, 100] 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    google.visualization.events.addListener(chart, 'animationfinish', function() { 
 
    $($('text').filter(':contains("RNI")')[0]).attr('fill', '#ff0000'); 
 
    $($('text').filter(':contains("RNI")')[0]).attr('font-size', '20'); 
 
    }); 
 
    chart.draw(data, options); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

Note: Les modifications apportées de cette manière ne montrera pas,
lors de l'utilisation de la méthode getImageURI pour obtenir une image de la carte ...