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

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

ここから下をコピペ>

<html>
<head>
<meta charset="UTF-8">
<title>ログイングラフ</title>
<script>
    device_data = [
      {date:'11/06', In:07528, color:0, mday:0},
      {date:'11/07', In:07924, color:1, mday:0},
      {date:'11/08', In:08641, 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:09697, color:0, mday:0},
      {date:'11/14', In:09813, color:1, mday:0},
      {date:'11/15', In:09746, color:1, mday:0},
      {date:'11/16', In:10357, color:1, mday:1},
      {date:'11/17', In:09669, color:1, mday:0},
      {date:'11/18', In:09924, color:1, mday:0},
      {date:'11/19', In:09774, color:2, mday:0},

      {date:'11/20', In:08853, color:0, mday:0},
      {date:'11/21', In:08811, color:1, mday:0},
      {date:'11/22', In:09163, color:1, mday:0},
      {date:'11/23', In:08489, color:0, mday:0},
      {date:'11/24', In:10120, color:1, mday:1},
      {date:'11/25', In:09806, color:1, mday:0},
      {date:'11/26', In:09946, color:2, mday:0},

      {date:'11/27', In:09208, color:0, mday:0},
      {date:'11/28', In:09075, color:1, mday:0},
      {date:'11/29', In:08935, color:1, mday:0},
      {date:'11/30', In:09873, color:1, mday:1},
      {date:'12/01', In:08841, color:1, mday:0},
      {date:'12/02', In:09330, color:1, mday:0},
      {date:'12/03', In:09453, color:2, mday:0},

      {date:'12/04', In:08542, color:0, mday:0},
      {date:'12/05', In:08918, color:1, mday:0},
      {date:'12/06', In:00000, color:1, mday:0},
      {date:'12/07', In:00000, color:1, mday:1},
      {date:'12/08', In:00000, color:1, mday:0},
      {date:'12/09', In:00000, color:1, mday:0},
      {date:'12/10', In:00000, 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