更改 Google 可视化图表中特定标签的字体和粗细

change the font and weight of a specific label in Google Visualization Charts

我有一张 Google 图表。例如(来自 Google 文档):

  <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

我想更改其中一个图例的字体和粗细,比如 Sales。我不知道该怎么做。有没有简单的方法?

没有开箱即用的选项来更改特定标签。

对于每种类型的标签,都有一个 textStyle 选项。
但同样,这将更改该类型的所有标签。
例如,要更改所有图例标签,请使用 --> legend.textStyle

legend: {
  textStyle: {
    bold: true,
    color: 'cyan',
    fontSize: 18
  }
}

但是,我们可以手动更改图表,一旦它完成绘制,
'ready' 活动期间。

请参阅以下工作代码段,在这里,我们找到了图表中使用的标签,
将它们与数据 table、
中的列标题进行比较 如果找到,我们会根据列索引更改样式...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: {
      position: 'bottom',
      textStyle: {
        bold: true,
        color: 'cyan',
        fontSize: 18
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

  // listen for ready event, must be assigned before calling draw
  google.visualization.events.addListener(chart, 'ready', function () {
    // get text elements from chart
    var labels = chart.getContainer().getElementsByTagName('text');

    // loop chart labels
    Array.prototype.forEach.call(labels, function(label) {
      // loop data table columns
      for (var i = 1; i < data.getNumberOfColumns(); i++) {
        // determine if label matches legend entry
        if (label.textContent === data.getColumnLabel(i)) {
          // determine column index
          switch (i) {
            // first series
            case 1:
              label.setAttribute('fill', 'magenta');
              label.setAttribute('font-size', '24');
              label.setAttribute('font-weight', 'normal');
              break;

            // second series
            case 2:
              label.setAttribute('fill', 'lime');
              label.setAttribute('font-size', '12');
              break;
          }
        }
      }
    });
  });

  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>