WordPress(Gutenberg)にChart.jsでcsvファイルのグラフ表示（後編）

前回の記事でWordPressのブロックエディタ(Gutenberg)の「カスタムHTML」を使って、Chart.jsでグラフを表示されるやり方はわかりました。
ただ、グラフを複数表示させた影響かグラフのデータをcsvファイルからの読み込みにしたせいか、2つ目、3つ目のグラフが表示されてませんでした。
その後、調べた結果、対処がわかりました。以下の記事の後編です。

Chart.js について
前記事での問題
iframe で Chart.js を表示
Chart.js のデータ部分を csvファイルにする

Chart.js について

良く考えると、Chart.js について余り知らないので調べてみた。
以下のページがわかりやすかったので貼っておきます。

Chart.js を使う

ダウンロードしてもいいし、script中で提供されてるサイトにリンクを貼っても良いのは知ってたけど、前回記事で使ってたバージョン(2.1.4)はだいぶ古かった模様で、現在は2.9.4。
参考にした記事が古かったのか。わりと頻繁に改版してるんだな。

Chart.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Simple HTML5 charts using the canvas element. - Si...続きを読む

サイト見て気付いたけど、提供されてるのは4種類ある。
　Chart.js、Chart.min.js、Chart.bundle.js、Chart.bundle.min.js

バンドル版は時間軸を使うための Moment.js が含まれてる模様。
ちなみに min は中身は同じで改行・空白・コメントを削って少しだけサイズを減らした奴らしいので基本は min の方を使えば良さそう。

インストール · Chart.js 日本語ドキュメント

ざっくりこんな感じ？
・時間軸を使わなければ Chart.min.js
・時間軸を使う場合、他で Moment.js を使ってれば Chart.min.js、使って無ければ Chart.bundle.min.js
・ダウンロード版を使うメリットがわからなかったので、特に要件が無ければ直接リンク版

前記事での問題

前記事では2つ目からのグラフが表示されてませんでした。
ちなみに同じ記事に複数のグラフを載せれないかというと、canvas id が別であればいい模様。
念のため最新版(2.9.4)で試したが状況は同じ。

やはり、csvファイルを使ってるせいか？と検索した結果、以下の記事を発見！

Chart.jsで作成したグラフにデータを読み込ませる３つの方法（直接、CSVファイル、カスタムフィールド） | オフィスナナフク

簡単お手軽にグラフを作成し、ホームページなどに表示させることができる Chart.js 。グラフ化し...続きを読む

【重要】Chart.jsで変数を使う場合の注意点
「CSVファイルやカスタムフィールド値など変数を使ってデータをセットすると、同一ページ内に1つしか表示できない」
今回はこれがビンゴっぽいですね。

対策は「グラフごとに独立したhtmlページを作成し、それぞれのhtmlファイルを「iframe」で表示」だそうです。

iframe で Chart.js を表示

iframe って WordPress に YouTube とかを埋め込む時に使ってるやつですね。
別のサイトの部品を部品として組み込むイメージ？
Chart.js で作ったグラフだけのページをhtmlで作って、それを部品として iframe で埋め込むという感じでしょうか。

先ほどのページでは iframe にする具体的なやり方は書かれて無かったので、iframe で表示するやり方をいろいろ調べると、見る側がPCで見たりスマホを縦にしたり横にしたりと画面サイズが変わるので、それに合わせて表示させる「レスポンシブ対応」にするやり方をするのが良いようです。

自分は以下のページが参考になりました。

iframeのレスポンシブ対応の方法。iphoneではみ出る問題も解決済み

では、先ほどの記事を参考にデータ直書きでグラフだけを表示する html を書いてみましょう。
html のベースはどこかのサイトのを頂いたんですがわからなくなりました。笑
今回は Chart.js は 2.9.4 に変えました。

ちなみに自分の場合、レンタルサーバー(CORESERVER)ですが、各ファイルを作るのは以前の記事で書いたように、/virtual/cuzuser/public_html/test2.teqnobreaker.com/work/ 配下に作ってます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name=”robots” content=”noindex”>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>

<body>
  <div class="chart-container" style="position: relative; width: 100%; height: 95vh;">
    <canvas id="myChart">ここにチャート表示</canvas>
  </div>
  <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月'],
        datasets:[{
          label: '体重',
          data: [79.5, 75.9, 75.65, 71.30, 70.73, 67.94, 67.11, 66.02, 67.45, 67.15],
          borderColor: "rgba(50,205,50,0.8)",
          backgroundColor: "rgba(50,255,50,0.8)",
          fill: false,
          lineTension: 0,
        }]
      }
    });
  </script>
</body>

</html>

<!DOCTYPE html>

<head>

</head>

<body>

<canvas id="myChart">ここにチャート表示</canvas>

</div>

var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {

type: 'line',

data: {

labels: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月'],

datasets:[{

label: '体重',

data: [79.5, 75.9, 75.65, 71.30, 70.73, 67.94, 67.11, 66.02, 67.45, 67.15],

borderColor: "rgba(50,205,50,0.8)",

backgroundColor: "rgba(50,255,50,0.8)",

fill: false,

lineTension: 0,

}]

}

});

</script>

</body>

</html>

この html を WordPress の記事中に iframe で取り込むには、ブロックエディタ（Gutenberg）の場合は前回同様「カスタムHTML」で以下を書き込みます。

<div class="iframe-wrap">
  <iframe src="https://test2.teqnobreaker.com/work/graph4.html" frameborder="0"></iframe>
</div>

</div>

ただ、これだけではサイズが小さく表示されるようです。
サイズを調整するために、iframe を囲った div の class "iframe-wrap" の表示の設定を CSS に設定すれば良いようです。
自分は CSS はかなり苦手なので、どうやって設定していいかまで書いてある記事は本当に助かります。
具体的には以下の設定を、WordPress の「外観」⇒「カスタマイズ」⇒「追加CSS」に追加すれば良いようです。
設定する方法からこの設定が記事単独の設定では無いことがわかりますが、ブログ全体の設定であるため今後は他の記事でグラフを表示する時は、"iframe-wrap" で囲むだけで同じ設定にできるわけですね。

.iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow:auto; 
  -webkit-overflow-scrolling:touch;
  border:2px solid #ccc; 
}
.iframe-wrap iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:none;
    display:block;
}

.iframe-wrap {

position: relative;

width: 100%;

padding-top: 56.25%;

overflow:auto;

-webkit-overflow-scrolling:touch;

border:2px solid #ccc;

}

.iframe-wrap iframe {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

border:none;

display:block;

}

実際に「カスタムHTML」で表示したものが以下です。
記事の枠いっぱいで表示されてるし、iphone で見ても大きく表示されました！
iphone でも各点を触れると情報が表示されたり「体重」をクリックすると表示をon/offできます。

ちなみに、WordPress の記事内では無く、単体で html を表示した場合は以下です。

https://test2.teqnobreaker.com/work/graph4.html

前回の記事のように記事中に直接書き込んでいると複数のグラフを書く場合は canvas id が重ならないように注意する必要がありましたが、iframe だと単独の html を部品として入れてるため、全て同じ canvas id を使ってても問題ないため、通常こっちのやり方の方が良さそうです。

Chart.js のデータ部分を csvファイルにする

最後に前の記事ではちゃんと表示できてなかったデータを csvファイルにしたグラフを iframe で複数出して表示が大丈夫か確認してみます。

前回の記事の最後と同じように作ってみます。
iframe で読み込む html ファイルは以下で大丈夫かな。。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name=”robots” content=”noindex”>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>

<body>
  <div class="chart-container" style="position: relative; width: 100%; height: 95vh;">
    <canvas id="myChart">ここにチャート表示</canvas>
  </div>
  <script src="../work/graph5.js"></script>
</body>

</html>

<!DOCTYPE html>

<head>

</head>

<body>

<canvas id="myChart">ここにチャート表示</canvas>

</div>

</body>

</html>

読み込んでる graph5.js は前回とほぼ同じで以下。

const label = [], num = [];
 
const req = new XMLHttpRequest();
req.open("GET", "../work/graph5.csv", true);
req.send(null);
 
req.onload = () => {
    if (req.status != 404) {
        const line = req.responseText.split("\n");
        const data = [];
        for (let i = 0; i < line.length - 1; ++i) {
            const cells = line[i].split(",");
            data.push(cells);
        }
        for (let row in data) {
            label.push(data[row][0]);
            num.push(data[row][1]);
        }
    }
}
 
const conf = {
    type: 'line',
    data: {
        labels: label,
        datasets: [{
            label: '体重',
            data: num,
            borderColor: "rgba(50,205,50,0.8)",
            backgroundColor: "rgba(50,255,50,0.8)",
            fill: false,
            lineTension: 0,
        },],
    },
};
 
const myChart = new Chart(document.getElementById('myChart').getContext('2d'), conf);

const label = [], num = [];

const req = new XMLHttpRequest();

req.open("GET", "../work/graph5.csv", true);

req.send(null);

req.onload = () => {

if (req.status != 404) {

const line = req.responseText.split("\n");

const data = [];

for (let i = 0; i < line.length - 1; ++i) {

const cells = line[i].split(",");

data.push(cells);

}

for (let row in data) {

label.push(data[row][0]);

num.push(data[row][1]);

}

const conf = {

type: 'line',

data: {

labels: label,

datasets: [{

label: '体重',

data: num,

borderColor: "rgba(50,205,50,0.8)",

backgroundColor: "rgba(50,255,50,0.8)",

fill: false,

lineTension: 0,

},],

};

const myChart = new Chart(document.getElementById('myChart').getContext('2d'), conf);

データは前回と同じだけど一応ファイル名だけ変えて以下。

4月, 79.5
5月, 75.9
6月, 75.65
7月, 71.30
8月, 70.73
9月, 67.94
10月, 67.11
11月, 66.02
12月, 67.45
1月, 67.15

4月, 79.5

5月, 75.9

6月, 75.65

7月, 71.30

8月, 70.73

9月, 67.94

10月, 67.11

11月, 66.02

12月, 67.45

1月, 67.15

最後に WordPress の記事に「カスタムHTML」で書く内容は以下。

<div class="iframe-wrap">
  <iframe src="https://test2.teqnobreaker.com/work/graph5.html" frameborder="0"></iframe>
</div>

</div>

実際に「カスタムHTML」に書いたのが以下。
「プレビュー」をすると、あれ？データが4月と5月だけしかないし値が0のところになってて、ちゃんとグラフで表示されて無い？
「体重」を2回クリックして、off→on にすると、あ！ちゃんと出た。。

うーん、また、csvファイルを読み込むより表示する方が早いとかのタイミング問題でしょうか。。

とりあえず原因はまた調べるとして、ここでは1つの記事に csvファイルから読み込むグラフを複数表示できるかを確認したかったので、試しに同じ内容で「カスタムHTML」をもう一つ作ってみます。

上記と同じように最初はデータがうまく反映されませんが、グラフが複数表示できることは確認できたので、とりあえず良しとしよう。笑

とりあえず今回は以上として、原因がわかったらまた更新します。
もし上記の原因がわかる方がいたら、コメント欄で教えて頂けると助かります。(_o_)

しかし、やってみるといろいろと問題が出ますね。
みんな、こんなんを一つづつ潰していって少しづつノウハウを貯めてるってわけですね。