chart.jsとangular.jsを利用して、入力した数値を円グラフでアニメーションを利用し表示したいと思います。
線グラフについては実践されている方がおり、その方からソースをいただきましたがうまく動きません。当方VBAくらいしかわからない初心者が挑戦中です。
html
1<!DOCTYPE html> 2<html lang="UTF-8" ng-app="myApp"> 3<head> 4 <title>Angular JS & Chart.js バインド</title> 5 <script src="./angular.min.js"></script> 6 <script src="./Chart.min.js"></script> 7</head> 8<body> 9<div ng-controller="formCtrl as form"> 10<form name="myForm" novalidate> 11<p ng-repeat="item in form.items"> 12<ng-form name="formItem"> 13{{item.month}}の場面:<input type="number" ng-change="form.change(formItem,$index);" ng-required="true" min="1" max="10" ng-pattern="/^[0-9]+$/" ng-model="item.num"> 14 <br> 15<span ng-show="!formItem.$valid">1~10間で<br>入力して下さい。</span> 16</ng-form> 17</p> 18</form> 19 20 21<canvas id="myCan" width="600" height="400"></canvas> 22 23</div> 24 25 <!--angular--> 26 <script src="./app.js"></script> 27</body> 28</html>
app.js
1var app = angular.module('myApp', []); 2app.controller('formCtrl', function () { 3 //念の為thisを退避 4 var me = this; 5 //canvas取得 6 var can = document.getElementById("myCan"); 7 var ctx = can.getContext("2d"); 8 //グラフの値 9 me.items = [ 10 //{値,月度} 11 {num:5,month:1}, 12 {num:5,month:2}, 13 {num:5,month:3}, 14 {num:5,month:4}, 15 {num:5,month:5}, 16 {num:5,month:6} 17 ]; 18 19 //値を配列に入れ替えてから、Chart.jsへ渡す 20 var addData = (function(){ 21 var arr = []; 22 for(var i = 0; i<me.items.length; i++){ 23 arr.push(me.items[i].num); 24 } 25 return arr; 26 }()); 27 chartData.datasets[0].data = addData; 28 29 //グラフを生成(Line:折れ線グラフ) 30 //var myChart = new Chart(ctx).Line(chartData); 31 var myChart = new Chart(ctx).Pie(chartData); 32 33 //フォームの値に変更があったら 34 me.change = function(formName,ind){ 35 //フォームにエラーが無いかチェック 36 if(!formName.$valid)return false; 37 //下記のプロパティを差し替えることによって、グラフを動的に変更できる 38 myChart.datasets[0].points[ind].value = me.items[ind].num; 39 //グラフ描画指示 40 myChart.update(); 41 }; 42}); 43 44//Chart.jsへ渡すデータ(Line:折れ線グラフ用) 45 var chartData = [ 46 { 47 value: [], 48 color:"#9acce3", 49 highlight: "#aadbf2", 50 label: "1" 51 }, 52 { 53 value: [], 54 color: "#70b062", 55 highlight: "#7fc170", 56 label: "2" 57 }, 58 { 59 value: [], 60 color: "#dbdf19", 61 highlight: "#ecef23", 62 label: "3" 63 }, 64 { 65 value: [], 66 color: "#a979ad", 67 highlight: "#bb8ebf", 68 label: "4" 69 }, 70 { 71 value: [], 72 color: "#cd5638", 73 highlight: "#e2694a", 74 label: "5" 75 } 76 77 ];
chart.jsとangular.jsについては記載しなくても大丈夫かな・・・。すみません、使い方、質問の仕方が間違えていたら申し訳ない。またソースに試行錯誤の後のごみが混じっていると思います。これも申し訳ない。
簡単に言うと、会議等で多数決や意見の割合を見る際に、画面上で数値を入力(できればアップダウンで数値を選択)して、それがリアルタイムに表示させたいのです。
参考にさせていただいたサイト様
http://matorel.com/archives/309
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー