Google Chart APIで円グラフを作る際に、jsからejsへのデータの渡し方。

12804 ワード
ejs JavaScript Express JSON GoogleChart JavaScript テキストリンク

はじめに

Webでグラフ表示をしたいと思い、「【超簡単】Google Chartsによる円グラフの作り方【コピペでOK】」を参考に始めました。データベースなどからデータを取り込むことも考え、データの置く場所をjsにおくのに苦労したので記事にしました。

環境

windows 10
node 16.13.1
ejs 3.1.6
express 4.17.3

動いたコード

環境構築は「【Node.js】20分でできる！GoogleChart表示」を参考にしました。

Step1. Node.jsのプロジェクト作成
Step2. npm install、 （Expressをインストール、ejsをインストール、プロジェクトフォルダ直下に index.js を作成）
Step3. GoogleChartのサイトからコードをコピー
Step4. 処理をちょこっと書き換える

index.js
const express = require('express');  
const app = express();  

app.get('/healthz', (req,res,next) => {
    return res.status(200).send({'status': 'OK'});
  });

  // テンプレートエンジンの指定
app.set("view engine", "ejs");

// Google Chart API へ引き渡すデータ
app.get('/charts', (req,res,next) => {
  let data = {
    items:{
      datas:[
        //['Category', '記事数'],
        ['Web', 24],
        ['Blog', 11],
        ['Business', 11],
        ['Gourmet', 6],
        ['Life', 16]
      ],
      options :{
        title:"ブログカテゴリ別記事数",
      }
    }
  }
    
  return res.render("./chart.ejs", data);
})

  app.listen(3000, () => {
    console.log('start express ...');
  })
views\chart.ejs
<html>
        <head>
            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
            <script type="text/javascript">
                google.charts.load('current', {'packages':['corechart']});
                google.charts.setOnLoadCallback(drawChart);
                function drawChart(){
                    
                    let itemsEjs = JSON.parse('<%- JSON.stringify(items) %>');
                    let dataejs = new google.visualization.DataTable();
                    dataejs.addColumn( 'string','Category');
                    dataejs.addColumn( 'number','記事数');
                    dataejs.addRows(itemsEjs.datas)
                    
                    <% console.log(items.options); %> 
                    console.log(itemsEjs);//logでない
              
                    
                    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                    chart.draw(dataejs,itemsEjs.options)
                }
            </script>
        </head>
        <body>
            <div id="piechart" style="width: 900px; height: 500px"></div>
        </body>
</html>

できたグラフ

最初のejs

<script>
//略
function drawChart(){
   let itemsEjs =<%= items %>
//略

何がいけないのか、当初さっぱりわからなかったが、開発者ツールでみると、itemsEjs=[object,Object]となっている。
価が渡ってないらしい。

検索していると、「javascriptとejsの変数の受け渡しについて」
が見つかる。

文字列以外は無理です。
略
オブジェクトやClassのインスタンスを無理やり文字列(String型)にキャストすると
"[object Object]"という文字列になります。
略
シリアライズしましょう。
JSON形式の文字列にして持ち込むのが基本です。

これを踏まえ、「【Node.js】20分でできる！GoogleChart表示」を参考に

let itemsEjs = JSON.parse('<%- JSON.stringify(items) %>');

終わりに

【Node.js】20分でできる！・・・のコードのほうが短くて、速い（データが多いとaddRowsが遅い？参考にしたところが出てこなくて・・・）のでお勧めですが、今回は中でどのように動いているかの理解が自分の中で少し前進したので、あえてaddRowsの書き方にしました。