將課程應用於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

的標籤SVG <text>元素，通過圖表創建

，你可以應用CSS給所有<text>元素，
但這不僅僅包括標籤越多，你指定

代替，建議使用下面的圖表選項，樣式的標籤......

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

---

雖然不推薦，您可以手動更改SVG，
圖表的'ready'或'animationfinish'事件觸發後

見下工作片斷......

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獲得圖表的圖像...