【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 件のコメント:
コメントを投稿