質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

4576閲覧

chart.jsにて、円グラフで動的変更ができません。

kihokutarou

総合スコア59

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2017/10/06 10:13

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

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

karamarimo

2017/10/06 10:42

使用しているchart.jsとangularJSのバージョンを追記してください。
kihokutarou

2017/10/06 12:47

chart.js Version: 1.0.1で、angularJSはv1.6.6とあります。よろしくお願いします。
guest

回答1

0

ベストアンサー

Chart.jsのバージョンが原因ではないかと思います。Chart.jsのバージョン2.0.0以降Lineメソッドは使用できません。

HTML

1<!DOCTYPE html> 2<html lang="UTF-8" ng-app="myApp"> 3<head> 4 <title>Angular JS & Chart.js バインド</title> 5 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/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" 14 min="1" max="10" ng-pattern="/^[0-9]+$/" ng-model="item.num"> 15 <br> 16 <span ng-show="!formItem.$valid">1~10間で<br>入力して下さい。</span> 17 </ng-form> 18 </p> 19 </form> 20 <canvas id="myCan" width="600" height="400"></canvas> 21</div> 22<!--angular--> 23<script>var app = angular.module('myApp', []); 24app.controller('formCtrl', function () { 25 //念の為thisを退避 26 var me = this; 27 //canvas取得 28 var can = document.getElementById("myCan"); 29 var ctx = can.getContext("2d"); 30 //グラフの値 31 me.items = [ 32 //{値,月度} 33 {num: 120, month: 1}, 34 {num: 220, month: 2}, 35 {num: 332, month: 3}, 36 {num: 210, month: 4}, 37 {num: 460, month: 5}, 38 {num: 520, month: 6} 39 ]; 40 41 //値を配列に入れ替えてから、Chart.jsへ渡す 42 var addData = (function () { 43 var arr = []; 44 for (var i = 0; i < me.items.length; i++) { 45 arr.push(me.items[i].num); 46 } 47 return arr; 48 }()); 49 chartData.datasets[0].data = addData; 50 51 //グラフを生成(Line:折れ線グラフ) 52 var myChart = new Chart(ctx).Line(chartData); 53 54 //フォームの値に変更があったら 55 me.change = function (formName, ind) { 56 //フォームにエラーが無いかチェック 57 if (!formName.$valid) return false; 58 //下記のプロパティを差し替えることによって、グラフを動的に変更できる 59 myChart.datasets[0].points[ind].value = me.items[ind].num; 60 //グラフ描画指示 61 myChart.update(); 62 }; 63}); 64 65//Chart.jsへ渡すデータ(Line:折れ線グラフ用) 66var chartData = { 67 labels: ["1月", "2月", "3月", "4月", "5月", "6月"],//X軸のラベル 68 datasets: [ 69 { 70 label: "My First dataset",//項目名 71 fillColor: "rgba(200,200,220,0.2)",//塗りつぶす色 72 strokeColor: "rgba(200,200,220,1)",//線の色 73 pointColor: "rgba(200,200,220,1)",//値の点を塗りつぶす色 74 pointStrokeColor: "#fff",//値の点の枠線の色 75 pointHighlightFill: "#fff",//マウスオーバー時値の点を塗りつぶす色 76 pointHighlightStroke: "rgba(220,220,220,1)",//マウスオーバー時値の点の枠線を塗りつぶす色 77 data: []//値(動的にバインドする為、空にしておく) 78 } 79 ] 80};</script> 81</body> 82</html>

追記

HTML

1<!DOCTYPE html> 2<html lang="ja" ng-app="myApp"> 3<head> 4 <title>Angular JS & Chart.js バインド</title> 5 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/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" 14 min="1" max="10" ng-pattern="/^[0-9]+$/" ng-model="item.num"> 15 <br> 16 <span ng-show="!formItem.$valid">1~10間で<br>入力して下さい。</span> 17 </ng-form> 18 </p> 19 </form> 20 <canvas id="myCan" width="600" height="400"></canvas> 21</div> 22<!--angular--> 23<script> 24 var app = angular.module('myApp', []); 25 app.controller('formCtrl', function () { 26 var me = this; 27 var can = document.getElementById("myCan"); 28 var ctx = can.getContext("2d"); 29 me.items = [ 30 {num: 1, month: 1}, 31 {num: 5, month: 2}, 32 {num: 6, month: 3}, 33 {num: 7, month: 4}, 34 {num: 5, month: 5}, 35 ]; 36 37 var addData = (function () { 38 var arr = []; 39 for (var i = 0; i < me.items.length; i++) { 40 arr.push(me.items[i].num); 41 } 42 43 for (var j = 0; j < arr.length; j++) { 44 chartData[j].value = arr[j]; 45 } 46 }()); 47 48 var myChart = new Chart(ctx).Pie(chartData); 49 50 me.change = function (formName, ind) { 51 if (!formName.$valid) return false; 52 myChart.segments[ind].value = me.items[ind].num; 53 myChart.update(); 54 }; 55 }); 56 57 var chartData = [ 58 { 59 value: 300, 60 color: "#9acce3", 61 highlight: "#aadbf2", 62 label: "1" 63 }, 64 { 65 value: 300, 66 color: "#70b062", 67 highlight: "#7fc170", 68 label: "2" 69 }, 70 { 71 value: 300, 72 color: "#dbdf19", 73 highlight: "#ecef23", 74 label: "3" 75 }, 76 { 77 value: 300, 78 color: "#a979ad", 79 highlight: "#bb8ebf", 80 label: "4" 81 }, 82 { 83 value: 300, 84 color: "#cd5638", 85 highlight: "#e2694a", 86 label: "5" 87 } 88 ]; 89</script> 90</body> 91</html>

投稿2017/10/06 10:24

編集2017/10/06 11:23
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kihokutarou

2017/10/06 10:27

回答ありがとうございます。 ご提示の参考サイトの線グラフは、ダウンロードしてきたChart.jsで正常に動いておりますので、単なる私の記述の不足や知識不足だと思われます・・・。
s8_chu

2017/10/06 11:25

追記しました、ご確認ください。
kihokutarou

2017/10/07 06:12

感動しました。自分のコードと見比べてみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問