Google Charts API更改字体

Question

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

这个参考链接的功能大致相同：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>

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

Answer 1

    <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更改字体

问题描述投票：1回答：1

1个回答

最新问题

Google Charts API更改字体

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1