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 件のコメント:

2018年4月23日月曜日

Angular.js と Chart.js (v2)で動的グラフを作ってみた。

■eclipse　javascript　環境

マーケットプレースで「wibclipse]をインストール
（Webclpse 2017 CL 11B)

https://playcode.io/
ここ便利！！
https://codepen.io
https://paiza.io/
ここもいい！！

<!DOCTYPE HTML SYSTEM "about:legacy-compat">
<html lang="ja" ng-app="myApp">
<head>
<title>"Angular JS & Chart.js　バインド"</title>
<!--
<script src="../script/angular.min.js"></script>
<script src="../script/Chart.min.js"></script>
 -->
<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 type="text/javascript" src="../js/app.js" charset="UTF-8"></script>
-->
</head>
<body>
<p> Angular.js + Chart.js TEST</p>
<div ng-controller="formCtrl as form">
<div ng-show="form.showFlag">
<form name="myForm" novalidate>
<div class="list-form">
<p ng-repeat="item in form.items" class="form-parts">
<ng-form name="formItem">
{{item.month}}:<input type="number" ng-change="form.change(formItem,$index);" ng-required="true" min="1" max="1000" ng-pattern="/^[0-9]+$/" ng-model="item.sales">
                <input type="number" ng-change="form.change(formItem,$index);" ng-required="true" min="1" max="1000" ng-pattern="/^[0-9]+$/" ng-model="item.profit">
                <input type="number" ng-change="form.change(formItem,$index);" ng-required="true" min="1" max="1000" ng-pattern="/^[0-9]+$/" ng-model="item.num">
<br>
<span ng-show="!formItem.$valid">1～1000間で<br>入力して下さい。</span>
</ng-form>
</p>
</div>
</form>
<div class="canvas-area" style="position: relative">
<canvas id="myChart" height="30vh" width="50vw"></canvas>
</div>
</div>
<button ng-click="form.onClick();" ng-show="!form.showFlag">PLAY DEMO</button>
</div>
</body>
</html>



/**
 *
 */
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
                },
              }
            ]
    }
  }
}
時刻: 0 件のコメント:

2018年3月24日土曜日

CentOS7 MPEG-4　デコーダをインストール

＃yum update

# yum install http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm

# yum -y install ffmpeg vlc smplayer

# yum -y install libdvdcss gstreamer{,1}-plugins-ugly gstreamer-plugins-bad-nonfree gstreamer1-plugins-bad-freeworld
時刻: 0 件のコメント:

CentOS7 ログイン画面がセカンダリディスプレイに表示される。

自分のログインIDで、ディスプレイの配置の調整をした後、

アプリケーション→システムツール→設定→Displays

# cp ~/.config/monitors.xml /var/lib/gdm/.config/

時刻: 0 件のコメント:

CentOS7 bluetooth がログイン画面で自動ONしない。

# vi /etc/bluetooth/main.conf

[Policy]
AutoEnable=true
時刻: 0 件のコメント:

CentOS7 ディスクトップ起動しない。

# yum groupinstall "GNOME Desktop"
# start X で初期化
# systemctl set-default graphical.target

# systemctl enable gdm.service
時刻: 0 件のコメント:
登録: 投稿 (Atom)

NEXTJS PWA化

$ cd frontend $ npm install @ducanh2912/next-pwa $ vi next.config.ts<<__EOF__ import withPWAInit from "@ducanh2912/next-pwa"...