カテゴリー: GoogleChart

公式ドキュメントはこちら

< コード例 >

HTML CDNから読込

<!-- Googleタイムラインチャート用 -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Javascriptで読込

    <script type="text/javascript">

      // Google Chart //
      google.charts.load('current', {'packages': ['timeline']});
      
    </script>  

GoogleChartをJavaScriptで利用していて、変化状況をリアルタイムで表示する折れ線グラフを作ってみたところ、メモリリークが激しいので、調べて直してみました。

1) チャートオブジェクトはグローバル変数にする
2) 描画する前にクリアする

[ コード例 ]

let gchart;

/**
 * 汎用折れ線チャートクラス
 * @type type
 */
class ChartOSInfo {

  /**
   * コンストラクタ
   */
  constructor(chartData, divid, tp, columnnm, columntitle) {
  -- 省略 -- 
  }

  -- 省略 --
  
   /**
   * 折れ線グラフ描画
   * @returns {undefined}
   */
  drawLineChart() {

    -- 省略 --

    // チャートの初期化 //
    if (gchart) {
      gchart.clearChart();
    }
    
    // チャートの描画 //
    gchart = new google.visualization.LineChart(document.getElementById(this.divid));
    gchart.draw(datatable, options);

    
  }

}

ここで教えていただきました。
https://base64.work/so/javascript/1461742

[ 利用例 ]