个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 13:55:10 25 4
gpt4 key购买 nike

我有一张谷歌图表。例如(来自 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' 事件期间。

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

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>

关于css - 更改 Google 可视化图表中特定标签的字体和粗细，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58749973/

25 4 0
文章推荐： javascript - 谷歌地图 → 手动 fitBounds
文章推荐： ios - 圆形 View 上的阴影不均匀
文章推荐： JavaScript 测试长度
文章推荐： jquery - 使用 RotateY 缓慢加载卡片翻转