■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
},
}
]
}
}
}
