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

2024-05-10 • 问答

我有一个Google图表。例如（来自Google文档）：

DeclARE @Date DATETIME = '2019-01-01 00:00:00',@EndDate DATETIME = '2019-01-02 00:00:00'

SELECT MIN(date),CONVERT(varchar(12),DATEADD(minute,DATEDIFF(MINUTE,CASE WHEN MAX(CASE WHEN Status = 'Start' THEN date END)<@Date THEN @Date ELSE MAX(CASE WHEN Status = 'Start' THEN date END) END,CASE WHEN MAX(CASE WHEN Status = 'Stop' THEN date END)>@EndDate THEN @EndDate ELSE MAX(CASE WHEN Status = 'Stop' THEN date END) END),0),114),activity_type,Machine
FROM(
    SELECT *,((ROW_NUMber() OVER(PARTITION BY machine,activity_type ORDER BY date))+1)/2 RN 
    FROM Your_Table
    )A
GROUP BY activity_type,Machine,RN

我想更改图例之一的字体和粗细，例如<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>。我不知道该怎么做。有简单的方法吗？

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

每种类型的标签都有一个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,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>

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

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

大家都在问