Google Charts API更改字体

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Google Charts API更改字体相关的知识,希望对你有一定的参考价值。

我基本上开发了自己的脚本修改这个并查询谷歌表而不是使用静态数据构建图表:

https://jsfiddle.net/hisham91/3rnd80m4/

这个参考链接的功能大致相同:http://bl.ocks.org/battlehorse/1122276

我可以为每个图表添加选项backgroundColor设置另一种背景颜色,但我真正得到的是改变字体颜色。因此,例如,如果我将背景设为黑色,则我无法将文本显示为白色。

 <html><head>
<title>Portal Counts</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="portalCount_test2.js"></script>
<script> 
 google.load('visualization', '1.1', {'packages':['controls','linechart']});
  google.setOnLoadCallback(initialize);

function initialize() {
  var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
  query.send(drawDashboard);
}
function drawDashboard(response) {
  var data = response.getDataTable();

  var filterPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter1_div',
    'options': {
      'filterColumnLabel': 'LinearOptimizationSheet',
      'fontcolor': '#ffffff',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false    
      }
    }
  });

   var testChart = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart1_div',
    'options': {
      'title': 'Test Chart',
      'height': 400,
      'backgroundColor': '#000000',
      'colors': ['#00c2ff', '#28f428'],
        },
  });

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard1_div'));
    dashboard.bind(filterPicker, testChart);
    dashboard.draw(data);

  } 
  </script>
</head>
<body bgcolor="#000000">
    <div align="center">
      <div id="dashboard1_div">
        <div id="filter1_div"></div>
        <div id="filter2_div"></div>    
        <div id="chart1_div" style="width:100%;"></div>  
      </div>
</div>   
    </div>
</body>
</html>

我尝试了在这里和网上找到的每个解决方案都没有成功。也许有人可以帮忙。提前致谢。

答案
    <html><head>
<title>Portal Counts</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script> 
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(initialize);

function initialize() {
  var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
  query.send(drawDashboard);
}
function drawDashboard(response) {
  var data = response.getDataTable();

  var filterPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter1_div',
    'options': {
      'filterColumnLabel': 'LinearOptimizationSheet',
      'fontcolor': '#ffffff',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false    
      }   
    }
  });

   var testChart = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart1_div',
    'options': 
    {
        'title': 'Test Chart',
        'height': 400,
        'backgroundColor': '#000000',
        'colors': ['#00c2ff', '#28f428'],
        titleTextStyle: 
        {
            color: '#FFFFFF'
        },
        hAxis: 
        {
            textStyle: 
            {
                color: '#FFFFFF'
            },
            titleTextStyle: 
            {
                color: '#FFFFFF'
            }
        },
        vAxis: {
            textStyle: 
            {
                color: '#FFFFFF'
            },
            titleTextStyle: 
            {
                color: '#FFFFFF'
            }
        },
        legend: 
        {
            textStyle: 
            {
                color: '#FFFFFF'
            }
        }
    }
});

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard1_div'));
    dashboard.bind(filterPicker, testChart);
    dashboard.draw(data);
} 
  </script>
</head>
<body bgcolor="#000000">
    <div align="center">
      <div id="dashboard1_div">
        <div id="filter1_div"></div>
        <div id="filter2_div"></div>    
        <div id="chart1_div" style="width:100%;"></div>  
      </div>
</div>   
    </div>
</body>
</html>

使用系列图表线。有关更多信息,请通过此链接查看https://developers.google.com/chart/interactive/docs/lines

使用haxis,vaxis,legend textStyle和titleTextStyle作为正文(Google Visualization API font color

另一种极端方式,使用f12并手动更改元素属性值,例如:$('path')。attr('stroke','blue') - 更改线条颜色

更新:我删除了我的示例并在重构后发布了代码。检查它

以上是关于Google Charts API更改字体的主要内容,如果未能解决你的问题,请参考以下文章

Google Charts列着色?

Google Charts Sankey - 节点文本样式

Google Charts API 面积图仅在注释中显示最大值和最小值

css PT Sans Google字体片段

Rails:尝试在开发模式下“非法”将 adv ruby​​(每个 + 迭代器)操作嵌入到 javascript(Google Charts API)中

InfoWindow中的Android Google地图摘要自动更新