SVGの折れ線グラフの作成方法

<link rel="stylesheet" href="https://www.website-learning.site/wp-content\themes\cocoon-child-master\skins\js-jquery-chart\chart-stype.css
">
<div id="contentContainer">
    <div class="inner">
        <div id="chart1_1" class="chart"></div>

    </div>
</div>


<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://www.website-learning.site/wp-content\themes\cocoon-child-master\skins\js-jquery-chart\raphael-1.5.2.js"></script>
<script src="https://www.website-learning.site/wp-content\themes\cocoon-child-master\skins\js-jquery-chart\elycharts.min.js"></script>


<script>
;(function (d, jQuery) {

	var jQdm_graph;

	jQdm_graph = function(){

    //
    // sample1_1
    // 縦軸と横軸のラベルと注釈、グリッド背景のみ表示させる折れ線グラフ
    //

    var sample1_1_setting = { // Sample1のベースパラメーター

      type : "line",
      margins: [ 20, 40, 40, 40], // [10,10,10,10]グラフのmarginを指定
      labels : // 横軸ラベル
      ["2013-06",,"2013-08",,"2013-10",,"2013-12",,"2014-2",],
      values : { // 各グラフごとの値
        serie1 : [42.68,43.12,42.78,40.8,40.44,41.87],
        serie2 : [25.44,24.53,25.55,28.56,28.96,27.31],
        serie3 : [20.01,20.09,19.25,18.36,18.11,18.15],
        serie4 : [8.39,8.59,8.57,8.52,8.54,8.5],
        serie5 : [1.03,1.1,1.16,1.16,1.2,1.18]
      },
      series : { // 各グラフごとの色
        serie1 : {
          color : "#f1c40f"
        },
        serie2 : {
          color : "#e67e22"
        },
        serie3 : {
          color : "#e74c3c"
        },
        serie4 : {
          color : "#27ae60"
        },
        serie5 : {
          color : "#2980b9"
        }

      },
      legend : { // 各グラフごとの注釈
        serie1 : 'Chrome',
        serie2 : 'IE',
        serie3 : 'Firefox',
        serie4 : 'Safari',
        serie5 : 'Opeara'

      },

      defaultSeries: { // グラフの基本設定

        plotProps : { // グラフの見た目設定
          "stroke-width" : 2 // lineグラフの線幅
        },

        legend : { // 注釈内容のスタイル設定
         textProps : { // 注釈テキストのスタイル
            fill: "#999"
          }
        }

      },

      defaultAxis : { // defaultAxis(軸)の設定

        max: 90, // x -> 50  値の最大値
        labels: true, // false -> true 軸ラベルを表示するか
        labelsDistance: 15, // 8 軸から軸ラベルまでの距離(px)
        labelsProps : { // 軸ラベルのスタイル
          font: '10px Arial',
          fill: "#000"
        },
        labelsAnchor : "auto", // auto 軸ラベルのアンカーポイント(labelDistanceやlabelRotateの基点になる)
        // auto: 軸ラベルの中央
        // start: 軸ラベルの右隅
        // end: 軸ラベルの左隅
        labelsMargin: 0, // 0 軸ラベルのmargin。縦軸は上マージン、横軸は左マージンに設定される

      },

      features : { // 特定の部分の設定

        grid : { // グリッドの設定
          nx : "auto", // auto 横軸のラベル表示数
          ny : 9, // 4 縦軸のラベル表示数
          draw : true, // false -> true グリッドを表示するか
          props : { // グリッドのスタイル
            stroke: '#dadada', // #e0e0e0
            "stroke-width": 1 // 1
          },
          extra : [0, 0, 10, 0], // [0,0,0,0] グリッド線のはみ出し幅。[上,右,下,左]
        },

        legend : { // 注釈の追加設定
          x : 60, // 'auto' 注釈のx座標。horizontalがtrueのときに'auto'が有効になる
          y : 10,
          width : 100, // horizontalがtrueのときに'auto'が有効になる
          height : 100,
          itemWidth : "fixed",
          // fixed 注釈の各項目の幅。fixedは固定。
          margins : [0, 0, 0, 0],
          dotMargins : [10, 5], // sx, dx
          borderProps : {
            fill : "rgba( 255, 255, 255, 0.5)",
            stroke : "black",
            "stroke-width" : 0
          },
          // 以下はdefaultSeriesの設定が優先される
          dotType : 'rect',
          dotWidth : 10, dotHeight : 10, dotR : 4,
          dotProps : {
            type : "rect",
            width : 10,
            height : 10,
            "stroke-width" : 0
          },
          textProps : { font: '12px Arial', fill: "#000" }
        }
      },

      axis: {
          l: {
          title: 'Cost'
          // suffix: '%' 末尾に%をつける
        }
      }

    };

    // sample1_1のチャートを作成
    jQuery("#chart1_1").chart(sample1_1_setting);


	}

	jQdm_graph();

})(document, jQuery);
</script>

作成にあたってつまづいたこと

jsファイルを読み込めない

WordPressのサーバーにアップさせていたファイルがパスが間違っていたため、読み込めませんでした。間違った表記でも「公開」せずに、「下書き保存でプレビュー表示」するとグラフが表示されていたので、混乱していました。

//正しい表記
<script src="https://www.website-learning.site/wp-content\themes\cocoon-child-master\skins\js-jquery-chart\raphael-1.5.2.js"></script>

//間違った表記
<script src="wp-content\themes\cocoon-child-master\skins\js-jquery-chart\raphael-1.5.2.js"></script>

エラーメッセージ
Failed to load resource: the server responded with a status of 404 ()

加えて、httpから始まるパスは安全性への配慮ができていないということからWordpressでは読み込みをしてくれないです。

//正しい表記
<script src="http//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

//間違った表記
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

エラーメッセージ
Failed to load resource: the server responded with a status of 404 ()

モバイルでグラフ全体が表示されない

以下のサイトではモバイル対応していたので参考にしたい

ガソリン価格(ハイオク・レギュラー・軽油・灯油)の推移

HTMLへJavascriptを記述する方法がわからなかった

何気なく使用していた<script>タグですが、headerで読み込みをする以外用途がわかっていかなかったです。そのため、複数グラフを作成する際は、グラフ📉一つに対してjavascriptファイルを一つ作成しなければならないのかと思い込んでいました。

<script>タグはjavascriptを直接記述することができるようなので、折れ線グラフのjavascriptコードを直接page.phpに記載しています。これによって、wordpressの投稿編集画面上だけでグラフ📉の作成と数値などの編集が可能となります。

<script>タグの位置

<script>タグはheaderにあるイメージですが、グラフページのないページでも毎回グラフ用の<script>タグを読み込んでいては、サイト全体が重くなってしまうため、<body>タグ内に作成することにしました。

はじめは、<body>タグ内の上部に記載していましたが、読み込み速度を上げるためには、 <body>タグ内の末尾に記述したほうが良いそうです。

ブラウザでは、ページを表示する前にHTMLを解析してDOMツリーを構築するそうなので、先にHTMLの解析をしてページ自体を表示させてからjavascriptを読み込ませたほうが、ページ自体の表示には時間がかからなくなります。

コメント

タイトルとURLをコピーしました