クラスを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); 

クラスを動的に追加しようとしているバーラベルがあるGoogle棒グラフがあります。しかし、私はラベル自体を参照する方法やクラスを追加する方法を見つけることができませんでした。チャートは、私が構築しているGoogleのデータテーブルから作成されます。ここで

は私が達成しようとしているものです：

私はこのように感じるシンプルでなければなりませんが、私は、ドキュメントに何かを見つけることができませんでした。誰でも答えがありますか？使用をお勧めします、あなたが代わりに

を指定

Answer 1

ラベルは、あなたがすべての<text>の要素にCSSを適用することができ

をチャートが作成した<text>要素を、SVGているが、これはただのラベルを超えて含まれるであろうラベルのスタイルをグラフのオプションを次のよう...

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

---

推奨されていないが、手動で、グラフの'ready'や'animationfinish'イベントが発生

作業スニペット以下を参照してください後
をSVGを変更することができます...

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>

注：変更内容この方法では表示されません
getImageURIメソッドを使用する場合は、チャートの画像を取得する...