Google Charts: style specific labels

问题:

Example Fiddle: https://jsfiddle.net/bafforosso/p6p7dy3j/4/

Using Google Bar Chart, I've been able to highlight specific bars by using {role: 'style'} column to have some bars blue and some grey.

I'm trying to find a way to style the labels on the left, e.g.: having bold labels for the highlighted (blue) bars but I can't seem to find a way to do this. Is there some way to achieve what I'm trying to do or is it simply not possible?

var data = google.visualization.arrayToDataTable([         ['Film', 'Quantity', {role: 'style'}],         ['Avengers (series)',     23, 'color: blue'],         ['Deadpool',      17, 'color: darkgray'],         ['Captain America (series)',  14, 'color: blue'],         ['Thor (series)', 14, 'color: blue'],         ['Ant Man',    14, 'color: blue'],         ['Suicide Squad', 12, 'color: darkgray'],         ['Guardians of the Galaxy', 12, 'color: blue'],         ['Fantastic Four (2015)', 11, 'color: darkgray'],         ['Batman Vs Superman', 10, 'color: darkgray'],         ['Iron Man (series)', 7, 'color: blue'],         ['Batman: Dark Knight (series)', 6, 'color: darkgray'],         ['X-Men (series)', 5, 'color: darkgray'],         ['Man of Steel', 2, 'color: darkgray'],         ['Amazing Spiderman (series)', 1, 'color: blue'],         ['The Wolverine ', 1, 'color: darkgray']     ]);      var options = {         hAxis: {             textPosition: 'none',             textStyle: {color: '#ffffff'}         },         vAxis: {             title: '',             titleTextStyle: {color: '#ffffff'}         },         legend: { position: 'none' },         bars: 'horizontal',         chartArea: {             left: '40%',             height: '100%'         }            };     var chart1 = new google.visualization.BarChart(document.getElementById('chart1'));     chart1.draw(data, options); 

Thanks in advance for any help, Fred

回答1:

There isn't a standard, 'google' way to style specific labels.
But you can use the chart's 'ready' event to modify the labels, once the chart has been drawn.
See following example...

google.charts.load('current', {   packages: ['corechart'],   callback: drawChart });  function drawChart() {   var data = google.visualization.arrayToDataTable([     ['Film', 'Quantity', {       role: 'style'     }],     ['Avengers (series)', 23, 'color: blue'],     ['Deadpool', 17, 'color: darkgray'],     ['Captain America (series)', 14, 'color: blue'],     ['Thor (series)', 14, 'color: blue'],     ['Ant Man', 14, 'color: blue'],     ['Suicide Squad', 12, 'color: darkgray'],     ['Guardians of the Galaxy', 12, 'color: blue'],     ['Fantastic Four (2015)', 11, 'color: darkgray'],     ['Batman Vs Superman', 10, 'color: darkgray'],     ['Iron Man (series)', 7, 'color: blue'],     ['Batman: Dark Knight (series)', 6, 'color: darkgray'],     ['X-Men (series)', 5, 'color: darkgray'],     ['Man of Steel', 2, 'color: darkgray'],     ['Amazing Spiderman (series)', 1, 'color: blue'],     ['The Wolverine ', 1, 'color: darkgray']   ]);    var options = {     hAxis: {       textPosition: 'none'     },     height: 600,     legend: {       position: 'none'     },     width: 800,     chartArea: {       left: '40%',       height: '100%'     }   };    var chartContainer = document.getElementById('chart1');   var chart1 = new google.visualization.BarChart(chartContainer);    // use the 'ready' event to modify the chart once it has been drawn   google.visualization.events.addListener(chart1, 'ready', function () {     var labels = chartContainer.getElementsByTagName('text');     for (var i = 0; i < labels.length; i++) {       // determine if label should be bold       if (data.getValue(i, 2).indexOf('blue') > -1) {         labels[i].setAttribute('font-weight', 'Bold');       }     }   });    chart1.draw(data, options); }

<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart1"></div>

文章来源: Google Charts: style specific labels