GoogleのチャートAPIフォントの変更

は、私は基本的に自分のスクリプト、この1つを変更し、代わりに静的データを使用してグラフを作成するのGoogleスプレッドシートを照会を開発しました：GoogleのチャートAPIフォントの変更

この参照リンクはかなり同じこと： http://bl.ocks.org/battlehorse/1122276

私はbackgroundColorのオプションを追加し、各チャートの別の背景色を設定することができていますが、私が実際に取得しないと、フォントの色を変更することです。たとえば、背景を黒にした場合、テキストを白で表示する方法はありません。

<html><head> <title>Portal Counts</title>  <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>

私はすべての解決策をここでとウェブ上で成功することなく試してみました。ソネーネが助けてくれるかもしれない。前もって感謝します。

出典

2017-12-14 Guy Grand

私は混乱しています、どの要素を色、テキストまたはグラフの行を変更したいのですか？ –

テキストは、私が管理できないグラフ要素です。チャートラインとチャートバックグラウンドは、オプションの下で修正されました。私はあなたのスニペットを見て、できるだけ早くフィードバックを与えます。ありがとうございました –

<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>

グラフの線のためシリーズを使用しています。詳細については、のために、F12キーを使用して、手動で要素の属性値を変更し、別の、極端な方法で、サイドテキスト（Google Visualization API font color）

の凡例 TEXTSTYLE & titleTextStyleをvaxis、このリンクを介して https://developers.google.com/chart/interactive/docs/lines

使用haxisを見ます例： - ：私が削除した私の例をリファクタリングした後、あなたのコードを投稿する$（ 'パス'）のattr（ '発作'、 '青'）

UPDATE色のラインを変更します。それを確認してください

出典

2017-12-14 17:32:20

残念ながら私はまだそれを動作させることができません。私はそれをより明確にするために、完全に動作するhtml/jsコードで投稿を更新しました。質問は/です：どのようにチャートのテキストの色を変更できますか？ありがとう –

正確にどの要素を明確にすることができますか？多分あなたはチャートグリッドか[コーンミール]、[ポンドケーキ]、[ミルク]ラインを意味しますか？ –

私はタイトルやハッティスのようなチャートのすべてのテキスト要素を意味します。上記のサンプルコードを最初の投稿（更新）で実行すると、テキスト要素がすべて黒であるため何も読むことができない黒いページがグラフに表示されます。ありがとう –

GoogleのチャートAPIフォントの変更

答えて

関連する問題