Chart3.html by canvas (項目数4まで)
textareaのdataは、行列の縦横をいれかえて(縦data)グラフ化
 by https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js 【ver.3.x】
mychartグラフ


例2   折れ線   
グラフ:0:ColumnChart 棒 , 3:PieChart 円, 2:BarChart , 1:LineChart 折れ線
data 2 ーーーー 注意 textareaの行列の縦横をいれかえてchart

数値null,"-" は、グラフなし。文字nullは 0 (エラーでない)。
例1   棒グラフ   
data 1 ーーーー  注意 data直接指定 x,y1,y2の指定の仕方が chart は独特(textareaの縦)
da0[0] =["月","1","2","3","4","5"] → ["1","2","3","4","5"]
da0[1] =["電気量17",1497,1392,1257,1300,901] → [1497,1392,1257,1300,901]
da0[2] =["電気量18",200,,,164,331]  → [200,,,164,331] 

by  https://qiita.com/tabetomo/items/f1fa423bf826a1d2efb8

 Chart.jsを使う 

Ver.3 折れ線


const chart = new Chart(ctx, { type: 'line', data: [ data 詳細 ], // data 詳細はここの [ ]内に書く options: { plugins: { title: { display: true, text: 'Chart Title' } }, scales: { x: { type: 'linear' }, // (Ver.2) xAxes: → (Ver.3) x: y: { type: 'linear'} // (Ver.2) yAxes: → (Ver.3) y: } }, plugins: [dataLabelPlugin], // plugins はここの [ ]内に書く }) -------- 月,1,2,3,4,5 電気量17,1497,1392,1257,1300,901 電気量18,,-,-,164,331 電気量19,756,704,650,562,459 電気量20,621,574,734,544,513 月,電気量17,電気量18,電気量19 1,1497,555,756 2,1392,444,704 3,1257,333,650 4,1300,164,562 5,901,331,459 月,電気量17,電気量18,電気量19,電気量20 1,1497,90,756,621 2,1392,90,704,574 3,1257,90,650,734 4,1300,164,562,544 5,901,331,459,513 6,704,325,309,351 7,690,274,304,256 8,732,340,349,301 9,751,302,378,330 10,730,267,304,255 11,821,309,387,361 12,1139,458,483,419 ーーーー const transpose = a => a[0].map((_, c) => a.map(r => r[c])); const array = [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]; transpose(array);//