回答編集履歴

追記

2017/10/06 11:23

投稿

s8_chu

スコア14731

test CHANGED Viewed

@@ -167,3 +167,193 @@
 </html>
 ```
+追記
+---
+```HTML
+<!DOCTYPE html>
+<html lang="ja" ng-app="myApp">
+<head>
+    <title>Angular JS & Chart.js　バインド</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
+</head>
+<body>
+<div ng-controller="formCtrl as form">
+    <form name="myForm" novalidate>
+        <p ng-repeat="item in form.items">
+            <ng-form name="formItem">
+                {{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">
+                <br>
+                <span ng-show="!formItem.$valid">1～10間で<br>入力して下さい。</span>
+            </ng-form>
+        </p>
+    </form>
+    <canvas id="myCan" width="600" height="400"></canvas>
+</div>
+<!--angular-->
+<script>
+    var app = angular.module('myApp', []);
+    app.controller('formCtrl', function () {
+        var me = this;
+        var can = document.getElementById("myCan");
+        var ctx = can.getContext("2d");
+        me.items = [
+            {num: 1, month: 1},
+            {num: 5, month: 2},
+            {num: 6, month: 3},
+            {num: 7, month: 4},
+            {num: 5, month: 5},
+        ];
+        var addData = (function () {
+            var arr = [];
+            for (var i = 0; i < me.items.length; i++) {
+                arr.push(me.items[i].num);
+            }
+            for (var j = 0; j < arr.length; j++) {
+                chartData[j].value = arr[j];
+            }
+        }());
+        var myChart = new Chart(ctx).Pie(chartData);
+        me.change = function (formName, ind) {
+            if (!formName.$valid) return false;
+            myChart.segments[ind].value = me.items[ind].num;
+            myChart.update();
+        };
+    });
+    var chartData = [
+        {
+            value: 300,
+            color: "#9acce3",
+            highlight: "#aadbf2",
+            label: "1"
+        },
+        {
+            value: 300,
+            color: "#70b062",
+            highlight: "#7fc170",
+            label: "2"
+        },
+        {
+            value: 300,
+            color: "#dbdf19",
+            highlight: "#ecef23",
+            label: "3"
+        },
+        {
+            value: 300,
+            color: "#a979ad",
+            highlight: "#bb8ebf",
+            label: "4"
+        },
+        {
+            value: 300,
+            color: "#cd5638",
+            highlight: "#e2694a",
+            label: "5"
+        }
+    ];
+</script>
+</body>
+</html>
+```