●GoogleCharts(グラフ)の操作利用率と利用事例
前回記事[３.３]の９件と今回２８件のグラフ表示例を紹介することで、約６割のGoogleChartsを、PSHメモ帳で操作利用しています。一方、実際に利用するとなると、次の２つの課題が改善できると快適利用できます。- グラフの表示データを簡単に入力設定できること。
- グラフの寸法、配置、背景色、タイトルが色々設定できること。
＜追伸＞
実際に使うグラフは、線グラフ、散布グラフ、棒グラフ、円グラフではないかと思います。棒/円グラフは次回紹介します。私はグラフ表示に、C++,Android,Java,Excelなど８種類ありますが、GoogleChartsはHTML利用のため敬遠してました。でもPSHメモ帳を使うようになって最も利用するツールになっています。
＜戻る 進む＞
●開始画面の表示
PSHメモ帳[wPshMemo201.bat]をダブルクリック[WC]し次項で作成の[wPshgraf201.txt]を表示ください。
[File表示]ドラッグ＆ドロップ or [TopPage]に登録して[WC]
★注: この記事を最初に閲覧される方は基本編[2.7][2.8][3.1]項で「PSHメモ帳」と追加ファイルを作成する必要がありますのでご参照ください。
●TXTファイルの組込み
次のコピペListからTXTファイルを作成ください。
[List3.4.1] -> [wPshGraf201.txt] ... この画面ファイル
[List3.4.2] -> [grfData20.txt] .... グラフ1本線データ例
[List3.4.3] -> [grfData30.txt] .... グラフ3本線データ例
[wGuiPsh2]
＋[grf] wPshGraf201.txt grfData20.txt grfData30.txt ...今回追加
●グラフ表示の原理
(a) [21]～[36]で次のデータを設定しグラフ表示します。
1) $zType: グラフの種類
2) $zOption: グラフ描画の各種パラメータ
3) $zData="[ 配列 ]" モード、 $zData="プログラム" モード、の２種類データ指定
(b) [27][28]の関数グラフは"プログラム" モード指定で、その他は"[ 配列 ]" モードの指定です。
(c) 事例Ｂ[22][25]の文字列入力データの"[ 配列 ]"設定は、次の方法で設定します。
1) $zcc="文字列" ##入力データ列
2) $zcm =($zccの不要文字削除).split(","); ##配列展開 $zcm[$ii]
3) $zdt0 ="[配列の名称項],`n";
4) for(){ $zdt0 += "[$jj,$dt1,$dt2,$dt3],`n"; $jj++;};
5) $zData="[ $zdt0 ]";
(d) 事例Ｃ[23][26]のファイルからの"[ 配列 ]"設定は、次の方法で設定します。
1) $zcc=Cat ファイル名 -Raw; ##入力データ列
2)～5) は、上記に同じ。
1) $zType: グラフの種類
2) $zOption: グラフ描画の各種パラメータ
3) $zData="[ 配列 ]" モード、 $zData="プログラム" モード、の２種類データ指定
(b) [27][28]の関数グラフは"プログラム" モード指定で、その他は"[ 配列 ]" モードの指定です。
(c) 事例Ｂ[22][25]の文字列入力データの"[ 配列 ]"設定は、次の方法で設定します。
1) $zcc="文字列" ##入力データ列
2) $zcm =($zccの不要文字削除).split(","); ##配列展開 $zcm[$ii]
3) $zdt0 ="[配列の名称項],`n";
4) for(){ $zdt0 += "[$jj,$dt1,$dt2,$dt3],`n"; $jj++;};
5) $zData="[ $zdt0 ]";
(d) 事例Ｃ[23][26]のファイルからの"[ 配列 ]"設定は、次の方法で設定します。
1) $zcc=Cat ファイル名 -Raw; ##入力データ列
2)～5) は、上記に同じ。
●各グラフの表示
★[21]１本：折れ線グラフ１（事例Ａ：配列データを直接記述) 次の行[WC]でグラフ表示する。
&&& $zType="LineChart"; ##★[WC]配列データを直接
★[22]１本：折れ線グラフ１（事例Ｂ：文字列からデータ取得)...同上。
&&& $zcc=" ##★[WC]文字列から
★[23]１本：折れ線グラフ１（事例Ｃ：Fileからデータ取得) ...同上。
&&& $zcc=Cat grf\grfdata20.txt -Raw ##★[WC]Fileから
&&& $zType="LineChart"; ##★[WC]配列データを直接
★[22]１本：折れ線グラフ１（事例Ｂ：文字列からデータ取得)...同上。
&&& $zcc=" ##★[WC]文字列から
★[23]１本：折れ線グラフ１（事例Ｃ：Fileからデータ取得) ...同上。
&&& $zcc=Cat grf\grfdata20.txt -Raw ##★[WC]Fileから
[HTML]
[----]
★[24]３本：折れ線グラフ２（事例Ａ：配列データを直接記述)...次の行[WC]でグラフ表示する。
&&& $zType="LineChart"; ##★[WC] 直接
★[25]３本：折れ線グラフ２（事例Ｂ：文字列からデータを取得）
&&& $zcc=" ##★[WC] 文字列から
★[26]３本：折れ線グラフ２（事例Ｃ：Fileからデータを取得）
&&& $zcc=Cat grf\grfdata30.txt -Raw ##★[WC]Fileから
[HTML]
[----]
★[27]２次：関数グラフ１(zDataへのプログラム(モード))...次の行[WC]でグラフ表示する。
&&& $zType="LineChart"; ##★[WC]
[HTML]
[----]
★[28]３次：関数グラフ２(zDataへのプログラム(モード))
&&& $zType="LineChart"; ##★[WC]
[HTML]
[----]
★[29]２本：折れ線グラフ３（２本線の凡例位置を下に...次の行[WC]でグラフ表示する。
&&& $zType="LineChart"; ##★[WC]
[HTML]
[HTML]
[----]
★[30]１本：トレンドライン...次の行[WC]で下図グラフ表示する。
&&& $zType="ScatterChart"; ##★[WC]
[HTML]
[----]
★[31]２本：曲線グラフ１：スプライン...次の行[WC]でグラフ表示する。
&&& $zType="LineChart"; ##★[WC]
[HTML]
[----]
★[32]多重：曲線グラフ２...次の行[WC]でグラフ表示する。
&&& $zType="LineChart"; ##★[WC]
[HTML]
[----]
★[33]散布グラフ１(基本型）...次の行[WC]でグラフ表示する。
&&& $zType="ScatterChart"; ##★[WC]
[HTML]
[----]
★[34]散布グラフ２(漸近線の付加...次の行[WC]でグラフ表示する。
&&& $zType="ScatterChart"; ##★[WC]
[HTML]
[----]
★[35]散布グラフ３(漸近線の付加...次の行[WC]でグラフ表示する。
&&& $zType="ScatterChart"; ##★[WC]
[HTML]
[----]
★[36]面グラフ...次の行[WC]でグラフ表示する。
&&& $zType="AreaChart"; ##★[WC]
[HTML]
[----]
★[37]階段面グラフ...次の行[WC]でグラフ表示する。
&&& $zType="SteppedAreaChart"; ##★[WC]
[HTML]
[----]
★[38]バブルグラフ...次の行[WC]でグラフ表示する。
&&& $zType="BubbleChart"; ##★[WC]
[HTML]
[----]
●コピペ[List3.4.1] -> [wPshGraf201.txt] この画面ファイル
#! @BakColor:#c6ffff @FntSize:14 @WndSize:1320,740
## [&&&]行ダブルクリック[WC] [;]連結行 [TopPage]へ戻る
##●●googleグラフ２：利用例と折れ線/関数/曲線/散布/面/階段/バブルグラフ
##
## [21][22][23]１本：折れ線グラフ１（事例Ａ:直接記述、Ｂ:文字列、Ｃ:Fileから)
## [24][25][26]３本：折れ線グラフ２（事例Ａ:直接記述、Ｂ:文字列、Ｃ:Fileから)
## [27][28]２次/３次：関数グラフ１/２(zDataへのプログラム組込型(モード))
## [29]２本：折れ線グラフ３（２本線の凡例位置を下にする
## [30]１本：トレンドライン
## [31][32]２本/多重：曲線グラフ１/２：スプライン/多重曲線
## [33][34][35]散布グラフ１/２/３(基本型/２次漸近線/多次漸近線
## [36]面グラフ、[37]階段面グラフ、[38]バブルグラフ
##----------------------------------------------------------------------------------------
##★[21]１本：折れ線グラフ１（事例Ａ：配列データを直接記述)
##
&&& $zType="LineChart"; ##★[WC]配列データを直接
; $zOption="{title: '[21]会社のパフォーマンス', titleTextStyle:{color:'blue', fontSize:22},
; width:900, height:500, fontSize:16, backgroundColor:'#f8fcef',
; chartArea:{left:120, top:80, right:60, bottom:80}, legend:'none',
; hAxis:{title:'時間'},
; vAxis:{title:'利益効率'},
; }";
; $zData="[ ['X','データ'],
; [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9], [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
; [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48], [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
; [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53], [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
; [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65], [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
; [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70], [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
; [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69], [66, 70], [67, 72], [68, 75], [69, 80]
; ]"; ssGraf $zType $zOption $zData;
##★[22]１本：折れ線グラフ１（事例Ｂ：文字列から配列データ取得)
##
&&& $zcc=" ##★[WC]文字列から
; 0, 10, 23, 17, 18, 9, 11, 27, 33, 40, 32, 35, 30, 40, 42, 47, 44, 48, 52, 54, 42, 55, 56, 57,
; 60, 50, 52, 51, 49, 53, 55, 60, 61, 59, 62, 65, 62, 58, 55, 61, 64, 65, 63, 66, 67, 69, 69, 70,
; 72, 68, 66, 65, 67, 70, 71, 72, 73, 75, 70, 68, 64, 60, 65, 67, 68, 69, 70, 72, 75, 80,
; ";
; $zcm=($zcc.replace(" ","").replace("`n","").replace("`r","")).split(","); $zdt0="['X','データ'],`n";
; for($ii=0; $ii -lt $zcm.length; $ii++ ){ $dt1=$zcm[$ii]; if( $dt1 -eq "" ){ continue; };
; $zdt0+="[$ii,$dt1],`n";
; }; dbc $zdt0;
;
; $zType="LineChart";
; $zOption="{title: '[22]会社のパフォーマンス(文字列から)', titleTextStyle:{color:'blue', fontSize:22},
; width:900, height:500, fontSize:16, backgroundColor:'#f8fcef',
; chartArea:{left:120, top:80, right:60, bottom:80}, legend:'none',
; hAxis:{title:'時間'},
; vAxis:{title:'利益効率'},
; }";
; $zData="[ $zdt0 ]"; ssGraf $zType $zOption $zData;
##★[23]１本：折れ線グラフ１（事例Ｃ：Fileから配列データ取得)
##
&&& $zcc=Cat grf\grfdata20.txt -Raw ##★[WC]Fileから
; $zcm=($zcc.replace(" ","").replace("`n","").replace("`r","")).split(","); $zdt0="['X','データ'],`n";
; for($ii=0; $ii -lt $zcm.length; $ii++ ){ $dt1=$zcm[$ii]; if( $dt1 -eq "" ){ continue; };
; $zdt0+="[$ii,$dt1],`n";
; }; dbc $zdt0;
;
; $zType="LineChart";
; $zOption="{title: '[23]会社のパフォーマンス(Fileから)', titleTextStyle:{color:'blue', fontSize:22},
; width:900, height:500, fontSize:16, backgroundColor:'#f8fcef',
; chartArea:{left:120, top:80, right:60, bottom:80}, legend:'none',
; hAxis:{title:'時間'},
; vAxis:{title:'利益効率'},
; }";
; $zData="[ $zdt0 ]"; ssGraf $zType $zOption $zData;
##★[24]３本：折れ線グラフ２（事例Ａ：配列データを直接記述)
##
&&& $zType="LineChart"; ##★[WC]
; $zOption="{ title:'[24]３本折れ線グラフ', titleTextStyle:{ fontSize:22, color:'black', },
; width:900, height:500, backgroundColor:{strokeWidth:2, fill:'#FCFCFC'}, chartArea:{left:100, top:80, right:180, bottom:60},
; hAxis:{ title:'XXXXXXXX', titleTextStyle:{fontSize:18}, ticks:[0, 2, 4, 6, 8, 10, 12, 14, 16],},
; vAxis:{ title:'YYYYYYYY', titleTextStyle:{fontSize:18}, gridlines:{color: '#888', minSpacing: 40}, },
; legend:{ position:'right', textStyle:{color:'blue', fontSize:18}, },
; crosshair:{ trigger:'both', },
; }";
; $zData="[
; [ '日付', '登録者', '来場者', '閲覧者'],
; [1, 37.8, 80.8, 41.8], [2, 30.9, 69.5, 32.4], [3, 25.4, 57, 25.7], [4, 11.7, 18.8, 10.5],
; [5, 11.9, 17.6, 10.4], [6, 8.8, 13.6, 7.7], [7, 7.6, 12.3, 9.6], [8, 12.3, 29.2, 10.6],
; [9, 16.9, 42.9, 14.8], [10, 12.8, 30.9, 11.6], [11, 5.3, 7.9, 4.7], [12, 6.6, 8.4, 5.2],
; [13, 4.8, 6.3, 3.6], [14, 4.2, 6.2, 3.4],
; ]"; ssGraf $zType $zOption $zData;
##★[25]３本：折れ線グラフ２（事例Ｂ：文字列から配列データを取得）
##
&&& $zcc=" ##★[WC] 文字列
; 37.8,80.8,41.8, 30.9,69.5,32.4, 25.4,57,25.7, 11.7,18.8,10.5,
; 11.9,17.6,10.4, 8.8,13.6,7.7, 7.6,12.3,9.6, 12.3,29.2,10.6,
; 16.9,42.9,14.8, 12.8,30.9,11.6, 5.3,7.9,4.7, 6.6,8.4,5.2,
; 16.9,42.9,14.8, 12.8,30.9,11.6, 5.3,7.9,4.7, 6.6,8.4,5.2,
; 4.8,6.3,3.6, 4.2,6.2,3.4, 12.8,30.9,11.6, 5.3,7.9,4.7,
; "; $zcm=($zcc.replace(" ","").replace("`n","").replace("`r","")).split(",");
; ##★
; $zdt0="[ '日付', '登録者', '来場者', '閲覧者'],`n"; $jj=1;
; for($ii=0; $ii -lt $zcm.length-1; $ii+=3 ){ $dt1=$zcm[$ii+0]; $dt2=$zcm[$ii+1]; $dt3=$zcm[$ii+2];
; $zdt0+="[$jj,$dt1,$dt2,$dt3],`n"; $jj++;
; }; dbc $zdt0;
; ##★
; $zType="LineChart";
; $zOption="{ title:'[25]３本折れ線グラフ', titleTextStyle:{ fontSize:22, color:'black', },
; width:900, height:500, backgroundColor:{strokeWidth:2, fill:'#FCFCFC'}, chartArea:{left:100, top:80, right:180, bottom:60},
; hAxis:{ title:'XXXXXXXX', titleTextStyle:{fontSize:18}, ticks:[0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22],},
; vAxis:{ title:'YYYYYYYY', titleTextStyle:{fontSize:18}, gridlines:{color: '#888', minSpacing: 40}, },
; legend:{ position:'right', textStyle:{color:'blue', fontSize:18}, },
; crosshair:{ trigger:'both', },
; }";
; $zData="[ $zdt0 ]"; ssGraf $zType $zOption $zData;
##★[26]３本：折れ線グラフ２（事例Ｃ：Fileから配列データを取得）
##
&&& $zcc=Cat grf\grfdata30.txt -Raw ##★[WC]Fileから
; $zcm=($zcc.replace(" ","").replace("`n","").replace("`r","")).split(",");
; ##★
; $zdt0="[ '日付', '登録者', '来場者', '閲覧者'],`n"; $jj=0;
; for($ii=0; $ii -lt $zcm.length-1; $ii+=3 ){ $dt1=$zcm[$ii+0]; $dt2=$zcm[$ii+1]; $dt3=$zcm[$ii+2];
; $jj++; $zdt0+="[$jj,$dt1,$dt2,$dt3],`n";
; }; dbc $zdt0;
; ##★
; $zType="LineChart";
; $zOption="{ title:'[26]３本折れ線グラフ', titleTextStyle:{ fontSize:22, color:'black', },
; width:900, height:500, backgroundColor:{strokeWidth:2, fill:'#FCFCFC'}, chartArea:{left:100, top:80, right:180, bottom:60},
; hAxis:{ title:'XXXXXXXX', titleTextStyle:{fontSize:18}, ticks:[0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28],},
; vAxis:{ title:'YYYYYYYY', titleTextStyle:{fontSize:18}, gridlines:{color: '#888', minSpacing: 40}, },
; legend:{ position:'right', textStyle:{color:'blue', fontSize:18}, },
; crosshair:{ trigger:'both', },
; }";
; $zData="[ $zdt0 ]"; ssGraf $zType $zOption $zData;
##★[27]２次：関数グラフ１(zDataへのプログラム組込型(モード))
##
&&& $zType="LineChart"; ##★[WC]
; $zOption="{ legend: 'none', title: '[27]２次関数(放物線) y=x^2', titleTextStyle:{color:'blue', fontSize:22},
; width:800, height:500, top:2, fontSize:18, backgroundColor:'#f1f8e9', chartArea:{left:80, top:50, right:80, bottom:80},
; }";
; $zData=" data.addColumn('number','x'); data.addColumn('number','y');
; var x; var y; var z = 0; var max = 101; max2=2*max; data.addRows( max2 );
; for(n=1; n<max2; n++){ x=2*(n-max)/(max-1); y=x*x; data.setValue(z,0,x); data.setValue(z,1,y); z=z+1; };
; "; ssGraf $zType $zOption $zData;
##★[28]３次：関数グラフ２(zDataへのプログラム組込型(モード))
##
&&& $zType="LineChart"; ##★[WC]
; $zOption="{ legend: 'none', title: '[28]３次関数 y=x^3', titleTextStyle:{color:'blue', fontSize:22},
; width:800, height:500, top:2, fontSize:18, backgroundColor:'#f1f8e9', chartArea:{left:80, top:50, right:80, bottom:80},
; }";
; $zData=" data.addColumn('number','x'); data.addColumn('number','y');
; var x; var y; var z = 0; var max = 101; max2=2*max; data.addRows( max2 );
; for(n=1; n<max2; n++){ x=2*(n-max)/(max-1); y=x*x*x; data.setValue(z,0,x); data.setValue(z,1,y); z=z+1; };
; "; ssGraf $zType $zOption $zData;
##★[29]２本：折れ線グラフ３（２本線の凡例位置を下にする
##
&&& $zType="LineChart"; ##★[WC]
; $zOption="{title: '[29]会社の動向', titleTextStyle:{fontSize:22, color:'blue', },
; width:900, height:500, fontSize:16, backgroundColor:{strokeWidth:2, fill:'#FCF2FB'},
; chartArea:{left:120, top:100, right:100, bottom:100}, legend:{ position: 'bottom'},
; }";
; $zData="[ ['年度', '売上', '経費'],
; ['2004',1000,400], ['2005',1170,460], ['2006',660,1120], ['2007',1030,540], ['2008',660,1120], ['2009',1030,540],
; ['2010',1000,400], ['2011',1170,460], ['2012',660,1120], ['2013',1030,540], ['2014',660,1120], ['2015',1030,540],
; ]"; ssGraf $zType $zOption $zData;
##★[30]１本：トレンドライン
##
&&& $zType="ScatterChart"; ##★[WC]
; $zOption="{title:'[30]カエデの樹齢と幹径', titleTextStyle:{color:'blue', fontSize:22},
; width:900, height:500, fontSize:16, backgroundColor:'#f1f8e9',
; hAxis:{title:'直径'},
; vAxis:{title:'年'},
; chartArea:{left:120, top:100, right:100, bottom:100}, trendlines:{0:{}}, legend:'none',
; }";
; $zData="[ ['Diameter','Age'],
; [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]
; ]"; ssGraf $zType $zOption $zData;
##★[31]２本：曲線グラフ１：スプライン
##
&&& $zType="LineChart"; ##★[WC]
; $zOption="{title: '[31]会社の動向', titleTextStyle:{color:'blue', fontSize:22},
; width:900, height:500, fontSize:16, backgroundColor:'#f1f8e9',
; chartArea:{left:120, top:100, right:100, bottom:100}, curveType:'function', legend:{position:'bottom'},
; }";
; $zData="[ ['年度', '売上', '経費'],
; ['2004',1000,400], ['2005',1170,460], ['2006',660,1120], ['2007',1030,540],
; ]"; ssGraf $zType $zOption $zData;
##★[32]多重：曲線グラフ２
##
&&& $zType="LineChart"; ##★[WC]
; $zOption="{ title: '[32]＜多重ライン＞', titleTextStyle:{color:'blue', fontSize:22},
; width:900, height:500, fontSize:16, backgroundColor:{strokeWidth:2, fill:'#FCF2FB'},
; curveType:'function', lineWidth:2, intervals:{'style':'line'},
; chartArea:{left:100, top:60, right:60, bottom:50}, legend:'none',
; }";
; $zData="[ ['x','values','i0','i1','i2','i3','i4','i5'],
; [1, 100, 90, 110, 85, 96, 104, 120],
; [2, 120, 95, 130, 90, 113, 124, 140],
; [3, 130, 105, 140, 100, 117, 133, 139],
; [4, 90, 85, 95, 85, 88, 92, 95],
; [5, 70, 74, 63, 67, 69, 70, 72],
; [6, 30, 39, 22, 21, 28, 34, 40],
; [7, 80, 77, 83, 70, 77, 85, 90],
; [8, 100, 90, 110, 85, 95, 102, 110],
; ]"; ssGraf $zType $zOption $zData;
##★[33]散布グラフ１(基本型）
##
&&& $zType="ScatterChart"; ##★[WC]
; $zOption="{ title: '[33]＜年齢と体重＞', titleTextStyle:{color:'blue', fontSize:22},
; width:900, height:500, fontSize:16, backgroundColor:'#f1f8e9', chartArea:{left:80, top:50, right:80, bottom:80},
; hAxis:{title:'年齢', minValue:0, maxValue:15},
; vAxis:{title:'体重', minValue:0, maxValue:15},
; legend:'none',
; }";
; $zData="[ ['年齢', '体重'],
; [ 8, 12 ], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7],
; ]"; ssGraf $zType $zOption $zData;
##★[34]散布グラフ２(漸近線の付加
##
&&& $zType="ScatterChart"; ##★[WC]
; $zOption="{ title: '[34]Descendants by Generation',
; width:900, height:500, fontSize:16, backgroundColor:'#fafafa', chartArea:{left:100, top:100, right:180, bottom:100},
; hAxis:{title: 'Generation', minValue: 0, maxValue: 3.5 },
; vAxis:{title: 'Descendants', minValue: 0, maxValue: 2100 },
; trendlines:{ 0:{type:'exponential', visibleInLegend:true, color:'red', }, },
; }";
; $zData ="[ ['Generation', 'Descendants'],
; [0, 1], [1, 33], [2, 269], [3, 2013]
; ]";
; ssGraf $zType $zOption $zData;
##★[35]散布グラフ３(漸近線の付加
##
&&& $zType="ScatterChart"; ##★[WC]
; $zOption="{ title:'[35]AAAAAAAAAAA',
; width:900, height:500, fontSize:16, backgroundColor:'#fafafa', chartArea:{left:100, top:100, right:180, bottom:100},
; hAxis:{ title:'XXXXX', minValue:0, maxValue:13.0, },
; vAxis:{ title:'YYYYY', minValue:0, maxValue:15.0, },
; crosshair:{ trigger:'both', orientation:'both', },
; trendlines:{ 0:{type:'polynomial', degree:3, visibleInLegend:true, color:'blue', lineWidth:5, opacity:0.6,}, },
; legend:'none',
; }";
; $zData ="[ ['Age', 'Weight'],
; [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7],
; ]"; ssGraf $zType $zOption $zData;
##★[36]面グラフ
##
&&& $zType="AreaChart"; ##★[WC]
; $zOption="{title:'[36]会社の業績', titleTextStyle:{color:'black', fontSize:22},
; width:1000, height:500, backgroundColor:'#f1f8e9',
; hAxis:{title:'年', titleTextStyle:{color:'#333'}}, vAxis:{minValue:0},
; }";
; $zData ="[ ['年', '売上', '利益'],
; ['2013', 1000, 400], ['2014', 1170, 460], ['2015',660,1120], ['2016',1030,540]
; ]"; ssGraf $zType $zOption $zData;
##★[37]階段面グラフ
##
&&& $zType="SteppedAreaChart"; ##★[WC]
; $zOption="{title: '[37]＜３９段デシリン＞', titleTextStyle:{color:'blue', fontSize:22},
; width:900, height:500, fontSize:16, backgroundColor:'#f1f8e9',
; vAxis:{title:'Accumulated Rating'},
; isStacked:true,
; }";
; $zData="[ ['Director (Year)', 'Tomatoes', 'IMDB'],
; ['アルフレッド(1935)', 8.4, 7.9], ['トーマス(1959)', 6.9, 6.5],
; ['シャープ(1978)', 6.5, 6.4], ['ハウエイ(2008)', 4.4, 6.2],
; ]"; ssGraf $zType $zOption $zData;
##★[38]バブルグラフ
##
&&& $zType="BubbleChart"; ##★[WC]
; $zOption="{title:'[38]Fertility', titleTextStyle:{color:'blue', fontSize:22},
; width:900, height:500, fontSize:16, backgroundColor:'#f1f8e9',
; hAxis:{title:'Life Expectancy'},
; vAxis:{title:'Fertility Rate'},
; bubble:{textStyle: {fontSize: 11}},
; }";
; $zData="[ ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
; ['CAN', 80.66, 1.67, 'North America', 33739900],
; ['DEU', 79.84, 1.36, 'Europe', 81902307],
; ['DNK', 78.6, 1.84, 'Europe', 5523095],
; ['EGY', 72.73, 2.78, 'Middle East', 79716203],
; ['GBR', 80.05, 2, 'Europe', 61801570],
; ['IRN', 72.49, 1.7, 'Middle East', 73137148],
; ['IRQ', 68.09, 4.77, 'Middle East', 31090763],
; ['ISR', 81.55, 2.96, 'Middle East', 7485600],
; ['RUS', 68.6, 1.54, 'Europe', 141850000],
; ['USA', 78.09, 2.05, 'North America', 307007000]
; ]"; ssGraf $zType $zOption $zData;
[コピペList3.4.2] -> [grfData20.txt] .... グラフ1本線データ例
0, 10, 23, 17, 18, 9, 11, 27, 33, 40, 32, 35,
30, 40, 42, 47, 44, 48, 52, 54, 42, 55, 56, 57,
60, 50, 52, 51, 49, 53, 55, 60, 61, 59, 62, 65,
62, 58, 55, 61, 64, 65, 63, 66, 67, 69, 69, 70,
72, 68, 66, 65, 67, 70, 71, 72, 73, 75, 70, 68,
64, 60, 65, 67, 68, 69, 70, 72, 75, 80,
[コピペList3.4.3] -> [grfData30.txt] .... グラフ3本線データ例
37.8,80.8,41.8, 30.9,69.5,32.4, 25.4,57,25.7, 11.7,18.8,10.5,
11.9,17.6,10.4, 8.8,13.6,7.7, 7.6,12.3,9.6, 12.3,29.2,10.6,
16.9,42.9,14.8, 12.8,30.9,11.6, 5.3,7.9,4.7, 6.6,8.4,5.2,
16.9,42.9,14.8, 12.8,30.9,11.6, 5.3,7.9,4.7, 6.6,8.4,5.2,
4.8,6.3,3.6, 4.2,6.2,3.4, 12.8,30.9,11.6, 5.3,7.9,4.7,
16.9,42.9,14.8, 12.8,30.9,11.6, 5.3,7.9,4.7, 6.6,8.4,5.2,
11.9,17.6,10.4, 8.8,13.6,7.7, 7.6,12.3,9.6, 12.3,29.2,10.6,