ログイングラフ作成ツール のバックアップ(No.2)

ツールっていってもhtmlだけど

2016/12/07 3:33 修正>
ログイン数を設定するところで桁調整のための先頭0を入れるとブラウザによってはエラーになるので除去

ここから下をコピペ>

<html>
<head>
<meta charset="UTF-8">
<title>ログイングラフ</title>
<script>
    device_data = [
      {date:'10/23', In: 6464, color:0, mday:0},
      {date:'10/24', In: 6850, color:1, mday:0},
      {date:'10/25', In: 6749, color:1, mday:0},
      {date:'10/26', In: 8533, color:1, mday:1},
      {date:'10/27', In: 8382, color:1, mday:0},
      {date:'10/28', In: 8458, color:1, mday:0},
      {date:'10/29', In: 8350, color:2, mday:0},

      {date:'10/30', In: 7733, color:0, mday:0},
      {date:'10/31', In: 7964, color:1, mday:0},
      {date:'11/01', In: 8112, color:1, mday:0},
      {date:'11/02', In: 8405, color:1, mday:1},
      {date:'11/03', In: 7457, color:1, mday:0},
      {date:'11/04', In: 8253, color:1, mday:0},
      {date:'11/05', In: 8273, color:2, mday:0},

      {date:'11/06', In: 7528, color:0, mday:0},
      {date:'11/07', In: 7924, color:1, mday:0},
      {date:'11/08', In: 8641, color:1, mday:0},
      {date:'11/09', In:14245, color:1, mday:1},
      {date:'11/10', In:11382, color:1, mday:0},
      {date:'11/11', In:11402, color:1, mday:0},
      {date:'11/12', In:10902, color:2, mday:0},

      {date:'11/13', In: 9697, color:0, mday:0},
      {date:'11/14', In: 9813, color:1, mday:0},
      {date:'11/15', In: 9746, color:1, mday:0},
      {date:'11/16', In:10357, color:1, mday:1},
      {date:'11/17', In: 9669, color:1, mday:0},
      {date:'11/18', In: 9924, color:1, mday:0},
      {date:'11/19', In: 9774, color:2, mday:0},

      {date:'11/20', In: 8853, color:0, mday:0},
      {date:'11/21', In: 8811, color:1, mday:0},
      {date:'11/22', In: 9163, color:1, mday:0},
      {date:'11/23', In: 8489, color:0, mday:0},
      {date:'11/24', In:10120, color:1, mday:1},
      {date:'11/25', In: 9806, color:1, mday:0},
      {date:'11/26', In: 9946, color:2, mday:0},

      {date:'11/27', In: 9208, color:0, mday:0},
      {date:'11/28', In: 9075, color:1, mday:0},
      {date:'11/29', In: 8935, color:1, mday:0},
      {date:'11/30', In: 9873, color:1, mday:1},
      {date:'12/01', In: 8841, color:1, mday:0},
      {date:'12/02', In: 9330, color:1, mday:0},
      {date:'12/03', In: 9453, color:2, mday:0},

      {date:'12/04', In: 8542, color:0, mday:0},
      {date:'12/05', In: 8918, color:1, mday:0},
      {date:'12/06', In: 9000, color:1, mday:0},
      {date:'12/07', In: 0000, color:1, mday:1},
      {date:'12/08', In: 0000, color:1, mday:0},
      {date:'12/09', In: 0000, color:1, mday:0},
      {date:'12/10', In: 0000, color:2, mday:0},
    ];
    window.addEventListener('load', function(event){ drawGraph(); } , false);
    //グラフ描画
    function drawGraph(){
      var cvs = document.querySelector('canvas');
      var context = cvs.getContext('2d');
      context.fillStyle = 'black';
      var maxdata = device_data[0].In;
      var mindata = device_data[0].In;
      var datacount = 0;
      for (var i = 1; i < (device_data.length); i++) {
          if ( device_data[i].In > 0) {
              datacount++;
              if ( device_data[i].In > maxdata) {
                  maxdata = device_data[i].In;
              }
              if ( device_data[i].In < mindata) {
                  mindata = device_data[i].In;
              }
          }
      }
      var x0 = 1280;
      var x1 = 50;
      var x2 = 50;
      var x3 = 50;
      var x4 = 50;

      //var add = (x0 - x1 - x2 - x3 - x4) / (device_data.length - 1);
      var add = (x0 - x1 - x2 - x3 - x4) / datacount;
 
      var y0 = 800;
      var y1 =  50;
      var y2 =  50;
      var y3 =  50;
      var y4 =  50;

      cvs.width  = x0;
      cvs.height = y0;

      var scaleY = (y0 - y1 - y2 - y3 - y4) / (maxdata - mindata) ;

      var hoge = -1;
      if ( hoge < 1) {
          context.translate(0, y0);
      }

      //背景塗りつぶし
      context.beginPath();
      context.fillStyle = 'white';
      context.fillRect(0, 0, x0, y0 * hoge);
      context.stroke();

　　　//グラフ1
      context.beginPath();
      context.strokeStyle  = 'orange';
      context.lineWidth = 1;
      for (var i = 0; i < (datacount + 1); i++) {
          context.moveTo( x1 + x2 + i * add , (cvs.height - y4      ) * hoge);
          context.lineTo( x1 + x2 + i * add , (             y1      ) * hoge);
      }
      context.stroke();

      //グラフ2
      context.beginPath();
      context.strokeStyle  = 'darkorange';
      context.lineWidth = 2;
      context.moveTo(             x1 , (cvs.height - y4 ) * hoge);
      context.lineTo(             x1 , (             y1 ) * hoge);
      context.lineTo( cvs.width - x3 , (             y1 ) * hoge);
      context.stroke();


      var nextpointX = x1 + x2;
      var nextpointY = ((device_data[0].In - mindata ) * scaleY + y1 + y2) * hoge;

      //データ
      context.beginPath();
      context.strokeStyle  = 'teal';
      context.lineWidth = 2;
      context.moveTo( nextpointX , nextpointY );

      for (var i = 1; i < (device_data.length); i++) {

          if ( device_data[i].In > 0) {

              nextpointX = nextpointX + add;
              nextpointY = ((device_data[i].In - mindata ) * scaleY + y1 + y2) * hoge;
              context.lineTo(nextpointX, nextpointY );

          }

      }
      context.stroke();

      //縦軸メモリ
      context.beginPath();
      context.fillStyle = 'black';
      context.textAlign = 'right';
      context.fillText(mindata, x1 - 5, ((mindata - mindata) * scaleY + y1 + y2) * hoge);
      context.fillText(maxdata, x1 - 5, ((maxdata - mindata) * scaleY + y1 + y2) * hoge);
      context.stroke();

　　　//横軸メモリ
      context.beginPath();
      context.fillStyle = 'black';
      //context.rotate( 45 * Math.PI / 180 );
      //context.textAlign = 'right';
      context.textAlign = 'center';
      for (var i = 0; i < datacount+1; i++) {
          if (device_data[i].mday > 0) {
              if(device_data[i].color == 0){
                  context.fillStyle = 'red';
              }
              if(device_data[i].color == 1){
                  context.fillStyle = 'green';
              }
              if(device_data[i].color == 2){
                  context.fillStyle = 'blue';
              }
              //context.fillStyle = date_style[device_data[i].color].colorname;
              context.fillText(device_data[i].date, (x1 + x2) + i * add , (y1  - 15) * hoge );
          }
      }
      context.stroke();

    }
</script>
</head>
<body>
<section>
  <h1></h1>
  <canvas>
    canvas要素が利用できるWebブラウザで開いてください。
  </canvas>
</section>
</body>
</html>

ここから上をコピペ>
ホーム リロード   新規 下位ページ作成 コピー 編集 添付 一覧 最終更新 差分 バックアップ 検索   凍結 名前変更     最終更新のRSS