0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

googlecharts 背景色 background color の設定 

Posted at

はじめに

以下の画像のようにgooglechartsで背景色を設定したい。
けれどgooglechartsってoptionの設定がいっぱいあってどう書けばどの範囲のbackground color を指定できるのかわからない。
日本語文献も少なそうなのでまとめました。

画像2.png

ソースコード

test.blade.php
<div class="p-header base-bg">
    テスト
</div>
<section class="pg-body">
    <div class="bg-white">
        <div id="group-graph" style="background-color:black;"></div>
    </div>
   
</section>

cssは以下のように設定

test.css
.p-header{
    margin-top:0pt;
    margin-bottom:10pt;
    font-size:45pt;
    height:50pt;
    padding-top:40pt;
    padding-left:15pt;
    font-weight:bold;
}
.base-bg{
    background-color:#4BACC6;(タイトル背景色の青系の色)
    color:#fff;
}

.pg-body{
    background-color:#B8E2DB;(水色っぽい色)
}
.bg-white{
    background-color:#fff;(白)
}
test.blade.php javascript
        function drawChartGroup(){

            const groups_count = {{ $groups_count }};
            const groups = @json($getData);
            var data = new google.visualization.DataTable();

            data.addColumn('string', 'title');
            data.addColumn('number', '受注数');
            var count = 0;
            while(count < groups_count){
                data.addRow([groups[count]['name'], groups[count]['count']]);
                count++;
            
            }

            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1, {
              calc: 'stringify',
              role: 'annotation',
              sourceColumn: 1,
              type: 'string'
            }]);

            var options = {
                title: 'グラフタイトル',
                titleTextStyle:{
                    fontSize:50,
                    color: 'green',
                },
                height:700,
                width:1500,
                chartArea: { backgroundColor : {
                    fill: 'red',
                    fillOpacity: 100
                    },
                },
                backgroundColor: 'pink',
                vAxis: { format: '###' },
                legend: { position: 'top', alignment: 'start' },
            
            }

            var chart = new google.visualization.ColumnChart(document.getElementById('group-graph'));
            chart.draw(data, options);



    }

わかりやすいように各所で激しめの(?)色を設定してみました。
上記のソースコードで入力の結果、以下の画像の結果になりました。
画像3.png

まとめ

ソースコードに書いた色と、出力結果を照らし合わせてまとめると。。

画像5.png
optionではこの項目で指定して背景色を設定すれば
自分の意図した箇所に色を設定できることがわかりました!!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?