SOTA-JP.COM

書評、WordPress、アフィリエイト、米国株投資

AMPでグラフを表示。JSライブラリとiframeの活用

投稿日:2018年6月20日 更新日:

AMPでグラフ

見栄えの良いグラフをウェブサイトに載せるには、Javascriptのライブラリを使うのがいちばん手軽です。
ライブラリを読み込んで簡単なコードを書くだけで、キレイなグラフを表示してくれるので。

でも、AMPページだと自作のJavascriptを使用できないので、色々と対策を考えなければいけません。

エクセルとかPHPのライブラリを使うなんてことも考えました。

でも、エクセルのグラフ画像だと、どうも文字が美しくない。
PHPのライブラリは便利そうだけど、pChartやJpGraphは有料。

そんなことを考えると、僕としては、iframeでグラフ用のページを読み込んで、iframe内でJavascriptを実行するのが一番いいと思っています。

AMPページであっても、iframe内なら好きなようにJavascriptを使えるので。

使用するJavascriptライブラリは、Chart.jsです。
Chart.jsはレスポンシブに対応しており、グラフの高さは固定で横幅だけを動的に変更することもできるので、AMPページでグラフを美しく表示するのにぴったりです。

ifarame内にグラフを表示すると、見た目はこんな感じになります。

コードはこちら。
親ページには次のコードを記入します。
AMPではない通常ページの場合

<iframe
   class="graph"
   width="100%"
   height=420
   frameborder="0"
   src="グラフページのパス">
</iframe>

AMPページの場合

<amp-iframe
   class="graph"
   height=420
   frameborder="0"
   src="グラフページのパス"
   layout="fixed-height"
   sandbox="allow-scripts">
</amp-iframe>

fixed-heightで高さを固定することで、余計なスクロールバーが表示されないようにしています。

続いて、グラフページのコードはこちらです。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
<title>chart1 | 2018年度サイト別売上実績(単位:万円)</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js">
</script>
<script type="text/javascript">
<!–
window.onload = function() {
  ctx = document.getElementById('chart1').getContext("2d");
 
  // x軸, y軸の設定
  var xAxes = [{
    gridLines:{
      color: "#dcdcdc",
    },
    ticks: {
      fontColor: "#666",
      fontSize: 12,
      beginAtZero: true,
    }
  }]
  var yAxes = [{
    gridLines:{
      color: "#dcdcdc",
    },
    ticks: {
      fontColor: "black",
      fontSize: 12,
    },
    barPercentage: 0.5,
  }]
  var scales = {xAxes, yAxes};
 
  window.myBar = new Chart(ctx, {
    type: 'horizontalBar', //横棒グラフ
    data: {
      labels: [
        'サイトA',
        'サイトB'
      ],
      datasets: [{
        label:'目標',
        data:[1500,1800],
        backgroundColor: 'green',
        borderColor: 'green',
      },
      {
        label:'実績',
        data:[1600,1700],
        backgroundColor: 'darkorange',
        borderColor: 'darkorange',
      }]},
    options: {
      scales,
      responsive: true,
      maintainAspectRatio: false,
      chartArea: {
        backgroundColor: '#FFFFFA'
      },
      title: {
        display: true,
        text: '2018年度サイト別売上実績(単位:万円)'
      },
      legend: {
        display: true
      },
      tooltips: {
        enabled: false
      },
      layout: {
        padding: {
          left: 0,
          right: 35,
          top: 0,
          bottom: 0
        }
      }
    }
  });
};

// 数字をグラフの横に表示するための処理
Chart.plugins.register({
  afterDatasetsDraw: function (chart, easing) {
    var ctx = chart.ctx;

    chart.data.datasets.forEach(function (dataset, i) {
    var meta = chart.getDatasetMeta(i);
      if (!meta.hidden) {
        meta.data.forEach(function (element, index) {
          // テキストの色
          ctx.fillStyle = 'rgb(0, 0, 0)';

          var fontSize = 12;
          var fontStyle = 'normal';
          ctx.font = Chart.helpers.fontString(
            fontSize,
            fontStyle
          );

          var dataString = dataset.data[index].toString();

          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          var padding = 5;
          var position = element.tooltipPosition();
          ctx.fillText(
            dataString,
            position.x + 20,
            position.y
          );
        });
      }
    });
  }
});

//グラフエリアの背景色を変更するための処理
Chart.pluginService.register({
  beforeDraw: function(c){
    if (c.config.options.chartArea
      && c.config.options.chartArea.backgroundColor) {
     
      var ctx = c.chart.ctx;
      var chartArea = c.chartArea;
      ctx.save();
      ctx.fillStyle = c.config.options.chartArea.backgroundColor;
      ctx.fillRect(
        chartArea.left,
        chartArea.top,
        chartArea.right chartArea.left,
        chartArea.bottom chartArea.top
      );
      ctx.restore();
    }
  }
});
–>
</script>
<style>
</style>
</head>
<body>
<canvas id='chart1' height=400px></div>
</body>
</html>

上記のコードの中の、「数字をグラフの横に表示するための処理」は、beizのノートさんのコードを使わせていただいています。

また、「グラフエリアの背景色を変更するための処理」は、Oboe吹きプログラマの黙示録さんのコードを使わせていただいています。

まとめ

この記事で紹介したchart.jsはとても高機能なライブラリです。
棒グラフ以外にもさまざまな種類のグラフを描くことができるので、オススメです。

それと、AMPページでiframeを使うというのも苦し紛れの方法ですが、意外と便利です。
アイデア次第でグラフ以外にも応用できると思います。