1.はじめに
GoogleChartsには綺麗で沢山のグラフがあります。それをメモ帳とパワーシェルを使って簡単に操作する方法をご紹介します。ここでは４種類のグラフですが、参考サイトからデータ部分をコピー＆ペーストすれば、約８割のgoogleChartをメモ帳で快適に操作することができます。GoogleChartsサイト 参考サイト
また、グラフ作成の課題であるデータ入力方法ですが、今回は、直接データ張付、ファイル入力、マウスコピーを使う方法で結構実用的と思います。ご参考になれば幸いです。
2.事前準備
それでは【マウス右ボタン⇒[新規作成]⇒テキストドキュメント】押下して新規ファイルを作成し、[新しいテキスト ドキュメント.txt] をダブルクリックしメモ帳を起動ください。
次に下記の[コピーList1]をメモ帳にコピー＆ペーストして貼り付けます。
そして、メモ帳の左上[ファイル]⇒[名前を付けて保存]⇒ファイル名[ wPshGraf111.bat ]を入力し⇒文字コード[ANSI]に設定して[保存]を押下した後、メモ帳を終了します。
★注：文字コード欄が[ANSI]設定であることを確認してください。
あとは、[ wPshGraf111.bat ] をダブルクリックすると、下図の窓が開きます。
3.操作方法
（１）グラフ表示方法
表示窓内の次の行をダブルクリックすると、今回のグラフが逐次表示されます。但し、ローソクグラフについては、データ参照サイトが開くのでデータの部分をマウスコピーした後、小窓の[OK]ボタンを押下ください。
１）&&& zType="LineChart"; ★[WC]折れ線グラフ
２）&&& zType="Gauge"; ★[WC]Gメータグラフ
３）&&& zType="GeoChart"; ★[WC]日本人口図グラフ
４）&&& zType="CandlestickChart"; zfl="7203_トヨタ"; ★[WC]ローソクグラフ
（２）グラフデータの編集・再表示
マウス右ボタン[編集]を押下すると、[ wPshGraf111.bat ]でメモ帳が開くので、グラフデータの部分を編集し、[ファイル]⇒[上書き保存] します。
表示窓への反映は、右ボタン[再表示]で反映されます。 なお、仮のデータ編集としてグラフ表示する場合は、表示窓を直接編集しダブルクリックするとグラフ表示します。(注：編集データは保存されません)
（３）プログラム説明・・・・List1 以降に記載します。
3.今回のグラフ４件
★[WC]折れ線グラフ（文字列/Fileからデータ取得の例)
★[WC]Gメータグラフ（ボタンをグラフに付加する例）
★[WC]日本人口グラフの一部（マウスコピーして張付けデータ編集の例)
★[WC]ローソクグラフ（マウスコピーして直接データ利用の例)
[コピーList1]
@echo off &rem if not "%~0"=="%~dp0.\%~nx0" (start /min cmd /c,"%~dp0.\%~nx0" %* &exit) &rem ★DOS窓mini化
powershell -ExecutionPolicy RemoteSigned "$fln=(echo %0); $aa=(Cat $fln -Raw); $fdt=$aa.substring($aa.indexof('##'+'STT:')); Iex($fdt+'##>');"
exit; pause&exit;
##
##Ver1.091 2024/1004 #####################################
##
##STT:●●batファイルで[GoogleChartを８割操作]
##
using namespace System.Windows.Forms; Add-Type -AssemblyName System.Windows.Forms,System.Drawing; ##★GUI
function dbg($cc){ [MessageBox]::Show($cc) }; function dbc($zcc){ Write-Host $zcc; }; ##★DBG
function ssView($bb){ $tBox.Text=$bb.substring( $bb.indexof("`n<"+"##" )); $tBox.SelectionStart=0; $mMain.Text="[1.071]"+$fln; }; ##★表示
##★メイン窓／編集窓の生成 ##★窓寸法(WW,HH) ##★文字種類/寸法 ##★背景色
$mMain =New-Object Form -Pro @{ Size="1280,620"; }; $tBox =New-Object TextBox -Pro @{ Font="BIZ UDゴシック,13"; BackColor="#C0E0C0";
Dock="Fill"; Multiline=$True; AcceptsReturn=$True; ScrollBars=[ScrollBars]::Vertical; }; $mMain.Controls.Add($tBox);
##★右釦メニュ ##★編集 ##★再表示 ##★ｸﾘｯﾌﾟ処理
$tBox.ContextMenuStrip =$conMenu =New-object ContextMenuStrip -Pro @{ Font="BIZ UDゴシック,12"; };
function ssSetRbtMenu( $zcha ){ $aa=$conMenu.Items.Add( ($zcc =New-Object ToolStripMenuItem) ); $zcc.Text=$zcha; return $zcc; };
(ssSetRbtMenu "編集(メモ帳)").add_Click({ notepad.exe $fln }); (ssSetRbtMenu "再表示").add_Click({ ssView( Cat $fln -Raw ) });
(ssSetRbtMenu "取得(ｸﾘｯﾌﾟ)" ).add_Click({ $tBox.Copy() }); (ssSetRbtMenu "貼り付").add_Click({ $tBox.Paste() });
##★マウス[WC]操作
$tBox.Add_DoubleClick({ $ln=((($tBox.Text).substring(0,$tBox.SelectionStart)).split("`n")).count-1; $zcc=($tBox.Lines[$ln]-split"##")[0];
if( $zcc.startsWith("&") ){ for( $ii=1; $ii -lt 200; $ii++ ){ $cc=$tBox.Lines[$ln+$ii]; if($cc -eq $null){ break; };
if( $cc.startsWith(";") ){ $zcc+="`n"+($cc.substring(1)).trim(); }else{ if( $cc.startsWith("#") ){ continue;}; break; }; }; }; ##dbc $zcc;
if( $zcc.startsWith("&&& ")){ $zcc=$zcc.substring(3); $tBox.SelectionStart+=4; Iex($zcc); return;};
if( $zcc.startsWith("&& " )){ $zcc=($zcc.substring(2)).replace('"','\"'); Start -NoN powershell -Arg "$zcc"; return;};
});
##★googleグラフの処理 [ ssGraf zType zOption zData zColum zPrg zBody]
##
function global:ssGraf($zType,$zOption,$zData,$zColum,$zAddProg,$zAddBody){ $szfile="$home\Desktop\gChart01.html";
$zcc0='<html><head><script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"> google.charts.load("current", {packages:["@@Package"]});
google.charts.setOnLoadCallback(drawChart); var chart; var options; var data;
function drawChart(){ chart = new google.visualization.'+$zType+'(document.getElementById("chart_values"));
options='+$zOption+'; ';
if( $zData.startsWith("[") ){ $zcc0+='data =new google.visualization.DataView( google.visualization.arrayToDataTable( '+$zData+' ) );' }
else{ $zcc0+='data =new google.visualization.DataTable(); '+$zData+'; ' };
$zcc0+=$zColum+';chart.draw(data, options); };'
$zcc0+=$zAddProg+';</script></head><body><div id="chart_values" ></div>'+$zAddBody+'</body></html>' ; $zcc1='corechart';
foreach($cc in 'AnnotationChart','TreeMap','Timeline','Table','VegaChart','GeoChart','Gauge','Sankey','Calendar','WordTree','TreeMap'){
if($cc -eq $zType){ $zcc1=$cc; break; }; }; $zcc0=$zcc0.replace('@@Package',$zcc1);
SC $szfile $zcc0; & $szfile; ##★Web.html起動
}; ssView($fdt); $mMain.ShowDialog();
<##Ver1.00--[GoogleChartsの操作]--------------------------------------------------------
## [WC]行をダブルクリック起動、マウス右釦:編集/ｸﾘｯﾌﾟ処理
##★GoogleChartsグラフギャラリ＆関連サイト----------------------------------------------
&& Start 'https://developers.google.com/chart/interactive/docs/gallery?hl=ja' ##★[WC] googleサイト
&& Start 'https://ryupapa008.blogspot.com/2024/09/google_23.html' ##★[WC] 関連サイト
##★折れ線グラフ（文字列/Fileからデータ取得の例)
##
&&& $zType="LineChart";##★[WC]折れ線グラフ
; ##★グラフデータ取得（ファイルから取得時は、$zcc=(Cat FileMame.txt -Raw) に変更）
; $zcc=" 0, 10, 23, 17, 18, 9, 11, 27, 33, 40, 32, 35, 30, 45, 31, 24, 29, 33, 36, 37, 39, 29, 40,
; 40, 42, 47, 44, 48, 52, 54, 42, 55, 56, 57, 60, 50, 52, 51, 49, 53, 55, 60, 61, 59, 62, 65,
; ";
; $zcc=($zcc.replace(" ","").replace("`n","").replace("`r","")).split(","); ##★不要文字削除
; $zdt0="['X(ii)','データ'],`n"; $ii=0; ##★データ列の指定
; foreach($cc in $zcc.split(",") ){ if( $cc -eq "" ){ continue; }; $zdt0+="[$ii,$cc],`n"; $ii++; }; dbc $zdt0;
; ##★オプション、データ指定⇒グラフ表示
; $zOption="{title: '折れ線グラフ', 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;
##★Ｇメータグラフ（釦をグラフに付加する例）
##
&&& $zType="Gauge"; ##★[WC]Ｇメータ
; $zOption="{ width:680, height:340,
; min:0, max:280, yellowFrom:200, yellowTo:250, redFrom:250, redTo:280, minorTicks:5,
; }";
; $zData="data.addColumn('number', 'Engine'); data.addColumn('number', 'Torpedo');
; data.addRows(2); data.setCell(0, 0, 120); data.setCell(0, 1, 80);
; ";
; $zAddProg="
; function changeSpeed(dd){ data.setValue(0,0,data.getValue(0,0) + dd*25);
; data.setValue(0,1,data.getValue(0,1) +dd*20); chart.draw(data,options); };
; function ssWebView(dd){
; switch(dd){
; case 11: window.open( 'https://www.yahoo.co.jp' ); return;
; case 12: window.open( 'https://www.msn.com/ja-jp' ); return;
; };
; };
; ";
; $zAddBody="
; <input type='button' value='[加速]' onclick='changeSpeed(1)' />
; <input type='button' value='[減速]' onclick='changeSpeed(-1)'/>
; <input type='button' value='yahoo' onclick='ssWebView(11)'/>
; <input type='button' value='MSN' onclick='ssWebView(12)'/>
; ";
; ssGraf $zType $zOption $zData "" $zAddProg $zAddBody;
##★マップグラフ(日本の人口：マウスコピーの例)
&& Start 'https://seijiyama.jp/lgov/lgov-ranking/r02/' ##★[WC]データ利用サイト
##
&&& $zType="GeoChart"; ##★[WC]日本人口図
; $zcc="
;順位 都道府県 総人口 平均年齢 人口増減率
;1 東京都 14047594 45.25 3.93867
;2 神奈川県 9237337 46.48 1.21764
;3 大阪府 8837685 47.1 -0.02018
;4 愛知県 7542415 45.65 0.79228
;5 埼玉県 7344765 46.84 1.07659
;6 千葉県 6284480 47.14 0.99337
;7 兵庫県 5465002 47.95 -1.26108
;8 北海道 5224614 49.78 -2.91949
;9 福岡県 5135214 46.69 0.65976
;"
##★不要文字削除⇒データ整列
; $zcc=$zcc.replace("県","").replace("府","").replace("都",""); $zdat="";
; foreach( $cc in $zcc.split("`n") ){ if( $cc.startsWith("順位") -or ($cc.length -le 10 )){ continue;};
; $zcm=$cc.split("`t"); $zdat+=( "[`'" +$zcm[1] +"`'," +$zcm[2] +"],`n" );
; }; $zdat= " ['都道府県', '人口']`n, $zdat"; dbc $zdat;
; ##★グラフ表示
; $zOption="{ title:'日本地図', titleTextStyle:{color:'blue', fontSize:22},
; width:800, height:600, fontSize:16, backgroundColor: '#ebf7fe', region:'JP', resolution:'provinces'
; }";
; $zData="[ $zdat ]"; ssGraf $zType $zOption $zData;
##★ローソクグラフ
##
!Webデータ箇所; 'https://www.kabudragon.com/s?t=7203' ##★[WC]株価リスト
##
&&& $zType="CandlestickChart"; $zfl="7203_トヨタ"; ##★[WC]ローソク
; Start ('https://www.kabudragon.com/s?t='+$zfl.substring(0,4)); dbg "株価を[日付]下からマウスコピー"
; $zcc=(Get-ClipBoard); $zcm=$zcc.replace(",","").split("`n"); ##★不要文字削除
; $zMa1=5; $zMa2=25; $zSMa1=$zSMa2=0;
; $nn=$zcm.length; $zcc0=""; $kcm=New-Object String[](500); ##dbc $zcm; ##★高値2,終値4,始値1,安値3
; for( $ii=$nn-1; $ii -ge 0; $ii--){ $cc=$zcm[$ii]; if($cc.startsWith("20") ){;}else{ continue; }; $ccm=$cc.split("`t");
; $dt0=$ccm[0].replace("2024/",""); $dt1=$ccm[2]; $jj++; $kcm[$jj]=$dt2=$ccm[4]; $dt3=$ccm[1]; $dt4=$ccm[3];
; ##★Ma5演算
; if($jj -lt $zMa1 ){ $zSMa1+=$dt2; $dt5=[int]($zSMa1/($jj+1)) }else{ $zSMa1+=($dt2-$kcm[$jj-$zMa1]); $dt5=[int]($zSMa1/$zMa1); };
; if($jj -lt $zMa2 ){ $zSMa2+=$dt2; $dt6=[int]($zSMa2/($jj+1)) }else{ $zSMa2+=($dt2-$kcm[$jj-$zMa2]); $dt6=[int]($zSMa2/$zMa2); };
; $zcc0+=("['$dt0',$dt1,$dt2,$dt3,$dt4],`n");
; }; $dda=$dt2-$kcm[$jj-1]; $dt55=$dt2-$dt5; $dt66=$dt2-$dt6; dbc $zcc0;
; ##★
; $zOption="{title:' $zfl [ $dt0 ]株価 $dt2 ($dda) [価-Ma5($dt5)]=$dt55 [価-Ma25($dt6)]=$dt66 ',
; titleTextStyle:{fontSize:20, color:'black'},
; width:1280, height:620, fontSize:12, chartArea:{left:20, top:30, right:70, bottom:40},legend:'none',
; series:{
; 0:{targetAxisIndex:1,},
; }
; }"; $zData="[ $zcc0 ], true "; ssGraf $zType $zOption $zData;
＜プログラム説明＞
(1) 1行目 [@echo off ....]から３行目： パワーシェル文をbatファイル自身から起動する方法で、[##STT:]行以下を切り出してIex()でパワーシェルを起動します。
(2) [using ....]行から [}; ssView($fdt); ....]行目： パワーシェル文で窓表示画面をコントロールする処理です。
(3) [<##Ver ...]行以下： パワーシェルではコメント行としての扱いですが、このアプリでは、窓表示データ領域として使います。
(4) 窓データ領域に今回のグラフデータを記述し、メモ帳で編集します。
(5) [&&]行をダブルクリックすると、継続する文字列でサブシェルとして独立に起動します。
(6) [&&&]行をダブルクリックすると、上記(2)記載のプログラム一部として継続処理します。
(7) [;]行は、[&]行に結合した後、上記(5)又は上記(6)の処理をします。
(8) [function global:ssGraf( ..... ]行からの13行で、今回のGoogleChartsグラフ表示の HTMLファイルを生成してグラフ表示します。
以上