Question

示例小提琴：https://jsfiddle.net/bafforosso/p6p7dy3j/4/

使用谷歌条形图，我已经能够通过使用{role：'style'}列突出显示特定的条形图，使一些条形蓝色和一些灰色。

我正试图找到一种方法来设置左边的标签，例如：有突出显示的（蓝色）条形图的粗体标签，但我似乎找不到办法来做到这一点。有没有办法实现我正在尝试做的事情，或者根本不可能做到这一点？

row_number()

提前感谢您的帮助，佛瑞德

Answer 1

没有标准，谷歌＆＃39;设置特定标签的方式。
但是，绘制图表后，您可以使用图表的'ready'事件修改标签。
请参阅以下示例...

＆＃13;

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

＆＃13;

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

＆＃13;

Google Charts：样式特定标签

1 个答案: