在 Google 条形图中，我可以设置不同的轴标签样式吗？ [复制]答案

【问题标题】：In a Google Bar Chart, can I style one axis label differently? [duplicate]在 Google 条形图中，我可以设置不同的轴标签样式吗？ [复制]
【发布时间】：2017-02-03 22:21:52
【问题描述】：

考虑this JSFiddle 中的条形图。

有没有办法只改变一个垂直轴标签的样式？例如，我可以将“Houston, TX”更改为粗体而不影响其他城市名称吗？

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawMultSeries);

function drawMultSeries() {
      var data = google.visualization.arrayToDataTable([
        ['City', '2010 Population', '2000 Population'],
        ['New York City, NY', 8175000, 8008000],
        ['Los Angeles, CA', 3792000, 3694000],
        ['Chicago, IL', 2695000, 2896000],
        ['Houston, TX', 2099000, 1953000],
        ['Philadelphia, PA', 1526000, 1517000]
      ]);

      var options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        hAxis: {
          title: 'Total Population',
          minValue: 0
        },
        vAxis: {
          title: 'City'
        }
      };

      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

【问题讨论】：

标签： charts google-visualization bar-chart

【解决方案1】：

一种方法是等待图表的'ready' 事件，

然后将<text>元素属性更改为'font-weight'

请参阅以下工作 sn-p...

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawMultSeries);

function drawMultSeries() {
  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population', '2000 Population'],
    ['New York City, NY', 8175000, 8008000],
    ['Los Angeles, CA', 3792000, 3694000],
    ['Chicago, IL', 2695000, 2896000],
    ['Houston, TX', 2099000, 1953000],
    ['Philadelphia, PA', 1526000, 1517000]
  ]);

  var options = {
    title: 'Population of Largest U.S. Cities',
    chartArea: {width: '50%'},
    hAxis: {
      title: 'Total Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.BarChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function (label) {
      if (label.innerHTML === 'Houston, TX') {
        label.setAttribute('font-weight', 'bold');
      }
    });
  });
  chart.draw(data, options);
}

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

【讨论】：