オシャレなグラフの作成方法

以下、PHPでグラフ用のコードを読み込む必要がある

<div id="chart1_3" class="chart"></div>
;(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-07","2013-08","2013-09","2013-10","2013-11"],
      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: 50, // 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 : 6, // 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: {
          suffix: '%'
        }
      }

    };

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

    // sample1_1のチャートをテンプレート化する
    jQuery.elycharts.templates['template_sample1_1'] = sample1_1_setting;


    //
    // sample1_2
    // 1番目のサンプルにさらにグラフに塗りと縦軸との交差ポイントごとにドットを配置した折れ線グラフ
    //

    var sample1_2_setting = {

      template : 'template_sample1_1', // 1番目のサンプルの内容をテンプレートとして読み込み、設定を継承する

      defaultSeries: { // グラフ設定(追加分)

        fill: true,
        fillProps : { // 塗りつぶしのスタイル
          stroke: "none",
          "stroke-width" : 0,
          "stroke-opacity": 0,
          opacity: .5
        },

        dot : true,  // false グラフのポイントにドットを表示するか
        dotProps : {
          size: 4,
          stroke: "#000",
          zindex: 5
        }

      }

    };

    // sample1_2のチャートを作成
    jQuery("#chart1_2").chart(sample1_2_setting);


    //
    // sample1_3
    // 1番目のサンプルにさらにグラフに塗りと縦軸との交差ポイントごとにドットを配置した折れ線グラフ
    //

    var sample1_3_setting = {

      template : 'template_sample1_1', // 1番目のサンプルの内容をテンプレートとして読み込み、設定を継承する

      tooltips : { // 各グラフごとのツールチップ
        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%"]
      },

      defaultSeries: { // グラフ設定(追加分)

        fill: true,
        fillProps : { // 塗りつぶしのスタイル
          stroke: "none",
          "stroke-width" : 0,
          "stroke-opacity": 0,
          opacity: .5
        },

        dot : true,  // false グラフのポイントにドットを表示するか
        dotProps : {
          size: 4,
          stroke: "#000",
          zindex: 5
        },

        tooltip: { // グラフのツールチップの設定
          active : true,  // true ツールチップが有効か?
          width: 80, // ツールチップの横幅
          height: 40, // ツールチップの縦幅
          roundedCorners: 5,  // ツールチップの四隅の角丸(px)
          padding: [10, 10], // [6, 6] ツールチップのpadding。CSSと一緒で、[縦,横]の順番で指定
          offset: [10, 10], // [20, 0] ツールチップのオフセット(margin)。CSSと一緒で、[縦,横]の順番で指定
          frameProps : {  // ツールチップの見た目
            fill: "rgba( 0, 0, 0, 0.7)",  // white 背景色
            "stroke-width": 4 // 2 外枠線の色
          },
          contentStyle : {  // ツールチップのコンテンツスタイル
            "font-family": "Arial", // フォント
            "font-size": "16px",  // 12px フォントサイズ
            "line-height": "24px",  // 16px 行送り
            color: "#fff"  // black 文字色
          }
        },

        highlight : { // グラフにマウスが触れたときの挙動
          scale : [3,3], // [x,y]->[2,1] ハイライト時の拡大率
          scaleSpeed : 100, scaleEasing : '',
          newProps : {
            opacity : 1
          },
          overlayProps : {
            "fill" : "white",
            "fill-opacity" : .3,
            "stroke-width" : 0
          },
          move : 0,
          moveSpeed : 100, moveEasing : '',
          restoreSpeed : 0, restoreEasing : ''
        }

      }

    };

    // sample1_3のチャートを作成
    jQuery("#chart1_3").chart(sample1_3_setting);

	}

	jQdm_graph();

})(document, jQuery);

上記とは別でCSSファイルも読み込む必要性あり

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">

コメント

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