Highcharts を使う

　Highcharts は、2009年に最初にリリースされた JavaScriptで記述されたチャート作成用のソフトウェアライブラリ(有償/無償)です。　demoサイト　参考１　参考２　参考３

■ Highcharts の利用準備

　Highcharts を使ってグラフを描くには、次の方法の何れかでHighcharts が機能するように組み込む必要があります。

Highcharts ファイルをダウンロードして使う。参考１
CDN サイトにリンクを張って利用する。 CDN サイト
引用記述例: <script src="https://code.highcharts.com/highcharts.js"></script>

　　　【 highcharts 記述の基本】　① highcharts.js の読込　② 表示領域確保　③ グラフの作成　で構成　参考
　　　

 <script src="https://code.highcharts.com/highcharts.js"></script><!-- highcharts.js の読込 --> ①
 <div id="hchart" style="width:700px; height:400px; border:solid 1px;"></div><!-- 表示領域指定 --> ②
 <script>
     new Highcharts.Chart( {                  // グラフを作成 ③
        // ここに具体的表示の記述をする 
     });
 </script>

■ 簡単な highcharts ページ１

　具体的な highcharts グラフページは、以下のようになります。　別頁で表示　参考

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="https://code.highcharts.com/highcharts.js"></script><!-- highcharts.js 読込 -->
</head>
<body>
  <div id="hchart" style="width:405px; height:290px; border:solid 1px;"></div><!-- 表示領域 -->
  <script>
     mychart = new Highcharts.Chart( {         // グラフを作成
        chart :{ renderTo : "hchart"},         // 出力先 id を指定
        title: {text: 'サンプルグラフ'},        // グラフを作成
        xAxis: { title:  {text: '横軸名'} },    // 横軸タイトル
        yAxis: {title: {text: '縦軸名'}},       // 縦軸タイトル
        series: [                               // データ系列を記載
            {name: "sqrt2", data:[1,4,1,4,2]} , // データ系列１を記載
            {name: "sqrt3", data:[1,7,3,2,0]} , // データ系列２を記載
        ] 
     });
  </script>
</body>
</html>

　概要　1. hicharts.js を呼び込みます。(5行目)、
　　　　2. id="hchart" のグラフ表示領域を用意します。(8行目)、
　　　　3. Highcharts.Chart グラフの利用を記述します。(10行目)、
　　　　4. chart の表示領域(ID)を指定(11行目)し、具体的なパラメータを記述します。(12-18行目)

■ 簡単な highcharts ページ 2

　縦棒グラフを jQuery も使って書くと、以下のようになります。　別頁で表示　参考

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script><!-- highcharts.js 読込 -->
</head>
<body>
  <div id="hchart" style="width:405px; height:290px; border:solid 1px;"></div><!-- 表示領域 -->
  <script>
     $(function () {
       $('#hchart').highcharts({
         chart: { type: 'column' },             // グラフの種類
         title: {text: 'サンプルグラフ ２'},     // グラフを表題
         xAxis: { title: {text: '横軸名'}, categories: ['1桁', 'R1', 'R2', 'R3', 'R4'] },  // 横軸タイトル
         yAxis: { title: {text: '縦軸名'} },    // 縦軸タイトル
         series: [                           // データ系列を記載
            {name: "sqrt2", data:[1,4,1,4,2]} , // データ系列１を記載
            {name: "sqrt3", data:[1,7,3,2,0]} , // データ系列２を記載
         ] 
       });
     });
  </script>
</body>
</html>

　概要　1. jquery を呼び込み(5行目)、 hicharts.js を呼び込みます。(6行目)、
　　　　2. id="hchart" のグラフ表示領域を用意します。(9行目)、
　　　　3. #hchart に highcharts の利用を記述します。(12行目)、
　　　　4. 縦棒グラフ(column) を表示します。(13行目)、
　　　　5. そのほかの詳細なパラメータを記述します。(14-20行目)

■ highcharts ページ 3

　ローカル csv ファイルを読込んでグラフを書くことも可能です。( この例はローカルファイル data.csv の読込を想定している ) 　別頁で表示　参考

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="https://code.highcharts.com/highcharts.js"></script><!-- highcharts.js 読込 -->
  <script>
     function init(){
        var file = document.querySelector('#getfile');
        file.onchange = function (){
          var fileList = file.files;
          var reader = new FileReader();
          reader.readAsText( fileList[0] );  // 1) csv データの取り込み
          reader.onload = function() { 
            datas = csvArray( reader.result );// 2) CSVデータ変換の呼び出し
            draw( datas );    // 3) データ準備、描画の呼び出し
          };
        }; // file.onchange  ++++
        
        function draw( datas ) {  // グラフを描く
          options = {
             chart :{ renderTo : "container" },  // グラフ出力先を指定
             title : {text: "グラフタイトル"},   // グラフタイトルを指定
             xAxis : {title: {text: "桁数"}},    // x軸のラベルを指定
             yAxis : {title: {text: "数値"}}    // y軸のラベルを指定
          } // options // ++++++
          
          let dats =[];  // 表示するデータを作成
          for( let i =0; i<datas.length; i++){
            let aa = new Object();
            aa.name = datas[i][0];
            let bb = datas[i]; bb.shift();   // 1列目を削除した配列
            aa.data = bb;
            dats.push( aa );  // 連想配列の配列を作成
          };  
          options['series'] = dats;   // options に作成したデータを追加
          chart = new Highcharts.Chart( options );       // グラフを作成
        }; //  draw( )   ++++++++++
        
        function csvArray( str ) { // 読込み csv を配列化
          var Nam = []; var csvData = []; 
          var ist = 0;  // ist行目(i=ist)から読込み
          var lines = str.split("\r\n");     // 各行に分割
          for (var i = ist; i < lines.length ; i++ ) {  // ist行目(i=ist)から最後まで読込み
            var dat = lines[i].split(",");
            csvData[i] = [];
            csvData[ i - ist ][0] = dat[0] ;
            for (let j = 1; j < dat.length; j++ ){  
               csvData[ i - ist ][j] = Number( dat[j] );
            }
          };  
          return csvData; 
        }; //  csvArray()  ++++++++++
     }; // init()   ++++++++++
  </script>
</head>
<body onload="init();">
  (<a href="data.csv" target="_blank" title="data.csv の具体例">data.csv</a>) <input type="file" id="getfile" accept="text/csv" >
  <div id='container' style="width:415px; height:260px; border:solid 1px;"></div><!-- 表示領域 -->
</body>
</html>

　概要　1. hicharts.js を呼び込みます。(5行目)、
　　　　2. id="getfile" の input ボタンを指定し、指定すると起動します。(8-9行目)、
　　　　3. 指定ファイルを読込み、利用に合った csv データに整形します。(12,14行目)、
　　　　4. 整形した csv データを基にグラフを表示します。(15行目)、
　　　　5. 折れ線グラフを表示する関数で(18行目)、データを成型後グラフを作成します。(36行目)
　　　　6. 読込み csv を配列化する関数で(39行目)、各行初列以外を数値化して作成します。(46-49行目)
　　　　7. ファイル読み込みボタンと(57行目)、グラフ表示領域(58行目)を用意します。

■ 色々な highcharts グラフ

　　hicharts の複合グラフの例です。　別窓表示　参考

色々なグラフ

■ 参考サイト

Highcharts demoサイト　 Highcharts入門　グラフを描く　描いてみる　時系列のグラフ　 Highchartsで決まり
その他比較　 HighMaps