2018年5月24日木曜日

全画面でグラフ表示してみた。

【HTML】
<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
 <meta charset="utf-8">
 <title>"Angular JS & Chart.js & screenfull example"</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/1.0.4/screenfull.min.js"></script>
</head>
<body>
 <p> Angular.js + Chart.js + screenfull DEMO</p>
 <div ng-controller="formCtrl as form">
  <div ng-show="form.showFlag">
    <div class="canvas-area" style="position: relative">
    <canvas id="myChart" height="30vh" width="50vw"></canvas>
   </div>
  </div>

  <button id="EnterFullScreen" ng-click="form.onClick();" ng-show="!form.showFlag">Enter Full Screen DEMO</button>
  <button id="ExitFullScreen" type="button">Exit Full Screen</button>
   <hr>
  <pre id="result">here</pre>
  <hr>
  </div>
<script>
  document.getElementById( "EnterFullScreen" ).onclick = function () {
    var rootElement = document.documentElement ;
    rootElement.requestFullscreen = rootElement.requestFullscreen || rootElement.mozRequestFullScreen || rootElement.webkitRequestFullscreen || rootElement.msRequestFullscreen ;
    rootElement.requestFullscreen().then(
      function () {
        document.getElementById( "result" ).textContent = "Success" ;
      } ,
      function ( errorMessage ) {
        document.getElementById( "result" ).textContent = "Error" + "(" + errorMessage + ")" ;
      }
    );
  }
  document.getElementById( "ExitFullScreen" ).onclick = function () {
    document.exitFullscreen = document.exitFullscreen || document.cancelFullScreen || document.mozCancelFullScreen || document.webkitCancelFullScreen || document.msExitFullscreen ;
    document.exitFullscreen() ;
  }
</script>
</body>
</html>


【JS】
/**
 *
 */
var app = angular.module('myApp', []);
app.controller('formCtrl', function () {
 //念の為thisを退避
 var me = this;
 me.showFlag = false;

 var myChart;

 //グラフの値
 me.items= [
  //{値,月度}
  {month:'01月',sales:111,profit:022,num:10},
  {month:'02月',sales:221,profit:212,num:15},
  {month:'03月',sales:331,profit:232,num:40},
  {month:'04月',sales:411,profit:242,num:60},
  {month:'05月',sales:511,profit:252,num:165},
  {month:'06月',sales:611,profit:212,num:226},
  {month:'07月',sales:711,profit:292,num:321},
  {month:'08月',sales:811,profit:232,num:422},
  {month:'09月',sales:911,profit:252,num:533},
  {month:'10月',sales:111,profit:222,num:614},
  {month:'11月',sales:111,profit:242,num:765},
  {month:'12月',sales:111,profit:262,num:826}
 ];

 //値を配列に入れ替えてから、Chart.jsへ渡す
 var addDataSales = (function(){
  var arr = [];
  for(var i = 0; i<me.items.length; i++){
   arr.push(me.items[i].sales);
  }
  return arr;
 }());
 var addDataProfit = (function(){
  var arr = [];
  for(var i = 0; i<me.items.length; i++){
   arr.push(me.items[i].profit);
  }
  return arr;
 }());
 var addDataNum = (function(){
  var arr = [];
  for(var i = 0; i<me.items.length; i++){
   arr.push(me.items[i].num);
  }
  return arr;
 }());

 chartData.data.datasets[0].data = addDataSales;
 chartData.data.datasets[1].data = addDataProfit;
 chartData.data.datasets[2].data = addDataNum;

 function init(){
  //canvas取得
  var ctx = document.getElementById("myChart").getContext("2d");

  //グラフを生成(Line:折れ線グラフ)
  myChart = new Chart(ctx, chartData);
 }

 //フォームの値に変更があったら
 me.change = function(formName,ind){
  //フォームにエラーが無いかチェック
  if(!formName.$valid)return false;
  //下記のプロパティを差し替えることによって、グラフを動的に変更できる
  myChart.data.datasets[0].data[ind] = me.items[ind].sales;
  myChart.data.datasets[1].data[ind] = me.items[ind].profit;
  myChart.data.datasets[2].data[ind] = me.items[ind].num
  //グラフ描画指示
  myChart.update();
 };

 me.onClick = function(){
  me.showFlag = true;
  setTimeout(init,100);
 };
});

//Chart.jsへ渡すデータ(Line:折れ線グラフ用)
var chartData ={
 type: 'bar',
 data: {
  labels: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//X軸のラベル
  datasets: [
    {
      type: 'bar',
      label:'売上',
      yAxisID: "y-axis-0",
     backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1,
        data: []     //値(動的にバインドする為、空にしておく)
    },
    {
        type: 'bar',
        label: '利益',
        yAxisID: "y-axis-1",
        backgroundColor: 'rgba(254,97,132,0.5)',
        borderColor: 'rgba(254,97,132,0.8)',
        data:[]
    },
    {
        type: 'line',
        label: '契約数',
        yAxisID: "y-axis-2",
        backgroundColor: 'rgba(54,164,235,0.5)',
        borderColor: 'rgba(54,164,235,0.5)',
        data:[]
    }
  ]
 },
 options: {
  title:{
   display: true,
   text: '売上と利益'
  },
  responsive: true,
  scales: {
            yAxes: [
              {
                id: "y-axis-0",   // Y軸のID
                type: "linear",   // linear固定
                position: "left", // どちら側に表示される軸か？
                ticks: {          // スケール
                  max: 1000,
                  min: 0,
                  stepSize: 100
                },
              },
                            {
                id: "y-axis-1",
                type: "linear",
                position: "left",
                ticks: {
                  beginAtZero:true,
                  max: 500,
                  min: 0,
                  stepSize: 100
                },
              },
              {
                id: "y-axis-2",
                type: "linear",
                position: "right",
                ticks: {
                  beginAtZero:true,
                  max: 1000,
                  min: 0,
                  stepSize: 100
                },
              }
            ]
    }
  }
}

動くけどエラー　？？？？？？
Uncaught TypeError: Cannot read property 'then' of undefined
時刻: 0 件のコメント:

2018年5月23日水曜日

全画面表示　javascript screenfull.js

【例１】
(HTML)
<img id="img"
  src="img.jpg" />


(script.js)
window.onload = function() {
 
    document.body.onclick = function() {
        if (this.webkitRequestFullScreen) {
        this.webkitRequestFullScreen();
        } else if (this.mozRequestFullScreen) {
            this.mozRequestFullScreen();
        } else if (this.msRequestFullScreen) {
            this.msRequestFullScreen();
        } else if (this.RequestFullScreen) {
            this.RequestFullScreen();
        } else {
            alert("このブラウザは全画面に対応していません。")
        }
    };
};


【例２】
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/screenfull.js/1.0.4/screenfull.min.js"></script>
<script>
   $(document).ready(function(){
    $('#go-full').click(function() {
        if (this.webkitRequestFullScreen) {
          this.webkitRequestFullScreen($('#my-full-site')[0]);
        } else if (this.mozRequestFullScreen) {
          this.mozRequestFullScreen($('#my-full-site')[0]);
        } else if (this.msRequestFullScreen) {
          this.msRequestFullScreen($('#my-full-site')[0]);
        } else if (this.RequestFullScreen) {
          this.RequestFullScreen($('#my-full-site')[0]);
        } else {
          alert("このブラウザは全画面に対応していません。");
        }
      })
   })
</script>
<button id="go-full">Go Fullscreen</button>
<iframe id="my-full-site" src="http://www.cxdnext.co.jp"></iframe>







時刻: 0 件のコメント:
登録: 投稿 (Atom)

zabbix7 amazon linux2023 インストール postgres15

【postgres】 dnf -y install postgresql15-server postgresql15-server-devel postgresql-setup initdb passwd postgres vi `find / -name pg_hba.con...

  • LVM ファイルシステムのマウント
    # mount /dev/nvme0n1p3 /mnt/m2 mount: /mnt/m2: 未知のファイルシステムタイプ 'LVM2_member' です. #  fdisk -l /dev/nvme0n1 ディスク /dev/nvme0n1: 953....
  • ZABBIX SNMP Trap 設定
    【snmp/snmptrap】 # yum -y install net-snmp # yum -y install net-snmp-utils # yum -y install snmptt # yum install perl-Sys-Syslog # fi...
  • CentOS8 mariaDBインストール
     ※Status code: 404 for https://dlm.mariadb.com/repo/mariadb-server/10.7....  → Ver.10 サポート切れ！！ # dnf remove MareaDB-client # curl -sS https:...