charts - 谷歌图表 : style specific labels

Question

示例 fiddle :https://jsfiddle.net/bafforosso/p6p7dy3j/4/

使用 Google 条形图，我能够通过使用 {role: 'style'} 列来突出显示特定的条形，使一些条形为蓝色，一些条形为灰色。

我正在尝试找到一种方法来设置左侧标签的样式，例如:为突​​出显示的(蓝色)条使用粗体标签，但我似乎无法找到一种方法来执行此操作。有什么方法可以实现我想要做的事情，还是根本不可能？

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);

在此先感谢您的帮助，弗雷德

Answer 1

没有一种标准的“谷歌”方式来设置特定标签的样式。
但是您可以使用图表的 'ready' 事件来修改标签，一旦绘制了图表。
请参阅以下示例...

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>