화면에 입력된 주문 수를 그래프에 반영하는 웹 앱(임시)
입력된 주문 수를 그래프에 반영해 보았습니다.
오늘 주문수를 입력하자마자 반영되네요!
DB라든지 사용하지 않고 곧바로 표시시키고 있을 뿐이니까!
URL은 여기입니다! → 오늘까지 매출을 시각화합시다.
사용법
하루가 끝나면 오늘 주문한 번호를 입력하십시오.
→이만큼 늘어나 가시화된다
힘든 점
이번에는, 뒤의 로직이라고 하는 보다 간단한 정보를 잘 표시하는 곳을 의식했습니다.
・그리드의 이해를 하지 않는 채로 bootstrap를 사용하기 시작해, 테이블이 오른쪽에 가거나, 엄청 높이가 낮아지거나, 작아지거나.
그것도 있고, 제대로 이해를 하기 위해서 이 사이트에서 공부했습니다. ↓
bootstrap의 구조에 대해 알아보기
・처음 Chart.js를 사용하려고 했습니다만, new Chart.js를 하는 곳에서,
Vue.js에서 호출하고 싶었지만 어떻게 작성해야할지 모르기 때문에 이번에는 gstatic을 사용했습니다.
이번에 하고 싶었지만 할 수 없었던 일
· DB를 사용하여 데이터 출입
・달을 선택한다. 이번은 10월에만 추가된다. . .
・「수치를 클리어.」어디야! 라고 생각하는 것을 해소한다. 지금은 10월의 수치가 뿌리 내려 사라진다.
・목표의 수치의 설정이나, 거기와의 차이의 묘화
・그리기 방법의 선정 절대 더 예쁘고 세련된 녀석 있는 야로!
환경
편집자: codepen
CSS: bootstrap
사용 라이브러리
vue.js
loader.js gstatic
출처
HTML 부분은 이쪽↓
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - chart</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
</head>
<body>
<!-- partial:index.partial.html -->
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<!-- 全体をVue.js有効にする -->
<div class="container text-center text-white bg-dark" id="app">
<!-- タイトル行 -->
<div class="row my-3">
<div class="col-sm-6 mx-auto"><h1>一日の終わりに注文数を入力</h1></div>
</div>
<!-- タスク入力行 -->
<div class="row my-3">
<div class="col-sm-6 mx-auto">
<input v-model:value="task" placeholder="注文数を入力" class="form-control"><br>
直前に追加した注文数：{{ previous_num }} <button v-on:click="addTask" class="btn btn-primary">追加</button>
</div>
</div>
<!-- 全てのタスクをクリアするボタン -->
<div class="row my-3">
<div class="col-sm-6 mx-auto">
<button v-on:click="clearAll" class="btn btn-danger">数値をクリア</button>
</div>
</div>
<!-- タスク追加されると表示される部分 -->
<div class="row my-3">
<div class="col-sm-6 mx-auto">
</div>
</div>
<div class="col-lg-10 mx-auto" id="stage"></div>
</div><!-- 全体ここまで -->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue-chartjs/3.5.1/vue-chartjs.min.js'></script><script src="./script.js"></script>
</body>
</html>
JS 부분은 이쪽↓
//必要なパッケージの読み込み
google.charts.load('current', {packages: ['corechart']});
// google.charts.setOnLoadCallback(drawChart);
const app = new Vue({
el: '#app', // Vueが管理する一番外側のDOM要素
data: {
// Vue内部で使いたい変数は全てこの中に定義する
task: '',
todoList: [['月', '数量'],
['１月', 65],
['２月', 59],
['３月', 80],
['４月', 81],
['５月', 56],
['６月', 55],
['７月', 55],
['８月', 55],
['９月', 55],
['１０月', 0],
['１１月', 0],
['１２月', 0]], // これは配列
chart:"",
previous_num:0,
},
methods: {
// 関数はここ
addTask: function() {
console.log('次のタスクが追加されました：', this.task);
// 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
this.todoList[10][1] = Number(this.todoList[10][1]) + Number(this.task);
console.log('現在のToDo一覧：', this.todoList);
this.previous_num = this.task;
this.drawChart();
},
// 以下を追加、関数名はなんでもよい
clearAll: function() {
this.todoList = [['月', '数量'],
['１月', 65],
['２月', 59],
['３月', 80],
['４月', 81],
['５月', 56],
['６月', 55],
['７月', 55],
['８月', 55],
['９月', 55],
['１０月', 0],
['１１月', 0],
['１２月', 0]];
console.log('全てのToDoが消去されました');
this.drawChart();
},
drawChart: function() {
console.log('drawChart');
//オプション設定
var options = {
'title': '注文数',
};
//月別データ
var array = this.todoList;
var data = google.visualization.arrayToDataTable(array);
var stage = document.getElementById('stage');
//グラフの種類を設定
var chart = new google.visualization.ColumnChart(stage);
//データとオプションを設定
chart.draw(data, options);
}
},
});
Reference
이 문제에 관하여(화면에 입력된 주문 수를 그래프에 반영하는 웹 앱(임시)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Sugizo50073508/items/4530088cc27f6cc7c322
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
하루가 끝나면 오늘 주문한 번호를 입력하십시오.
→이만큼 늘어나 가시화된다
힘든 점
이번에는, 뒤의 로직이라고 하는 보다 간단한 정보를 잘 표시하는 곳을 의식했습니다.
・그리드의 이해를 하지 않는 채로 bootstrap를 사용하기 시작해, 테이블이 오른쪽에 가거나, 엄청 높이가 낮아지거나, 작아지거나.
그것도 있고, 제대로 이해를 하기 위해서 이 사이트에서 공부했습니다. ↓
bootstrap의 구조에 대해 알아보기
・처음 Chart.js를 사용하려고 했습니다만, new Chart.js를 하는 곳에서,
Vue.js에서 호출하고 싶었지만 어떻게 작성해야할지 모르기 때문에 이번에는 gstatic을 사용했습니다.
이번에 하고 싶었지만 할 수 없었던 일
· DB를 사용하여 데이터 출입
・달을 선택한다. 이번은 10월에만 추가된다. . .
・「수치를 클리어.」어디야! 라고 생각하는 것을 해소한다. 지금은 10월의 수치가 뿌리 내려 사라진다.
・목표의 수치의 설정이나, 거기와의 차이의 묘화
・그리기 방법의 선정 절대 더 예쁘고 세련된 녀석 있는 야로!
환경
편집자: codepen
CSS: bootstrap
사용 라이브러리
vue.js
loader.js gstatic
출처
HTML 부분은 이쪽↓
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - chart</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
</head>
<body>
<!-- partial:index.partial.html -->
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<!-- 全体をVue.js有効にする -->
<div class="container text-center text-white bg-dark" id="app">
<!-- タイトル行 -->
<div class="row my-3">
<div class="col-sm-6 mx-auto"><h1>一日の終わりに注文数を入力</h1></div>
</div>
<!-- タスク入力行 -->
<div class="row my-3">
<div class="col-sm-6 mx-auto">
<input v-model:value="task" placeholder="注文数を入力" class="form-control"><br>
直前に追加した注文数：{{ previous_num }} <button v-on:click="addTask" class="btn btn-primary">追加</button>
</div>
</div>
<!-- 全てのタスクをクリアするボタン -->
<div class="row my-3">
<div class="col-sm-6 mx-auto">
<button v-on:click="clearAll" class="btn btn-danger">数値をクリア</button>
</div>
</div>
<!-- タスク追加されると表示される部分 -->
<div class="row my-3">
<div class="col-sm-6 mx-auto">
</div>
</div>
<div class="col-lg-10 mx-auto" id="stage"></div>
</div><!-- 全体ここまで -->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue-chartjs/3.5.1/vue-chartjs.min.js'></script><script src="./script.js"></script>
</body>
</html>
JS 부분은 이쪽↓
//必要なパッケージの読み込み
google.charts.load('current', {packages: ['corechart']});
// google.charts.setOnLoadCallback(drawChart);
const app = new Vue({
el: '#app', // Vueが管理する一番外側のDOM要素
data: {
// Vue内部で使いたい変数は全てこの中に定義する
task: '',
todoList: [['月', '数量'],
['１月', 65],
['２月', 59],
['３月', 80],
['４月', 81],
['５月', 56],
['６月', 55],
['７月', 55],
['８月', 55],
['９月', 55],
['１０月', 0],
['１１月', 0],
['１２月', 0]], // これは配列
chart:"",
previous_num:0,
},
methods: {
// 関数はここ
addTask: function() {
console.log('次のタスクが追加されました：', this.task);
// 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
this.todoList[10][1] = Number(this.todoList[10][1]) + Number(this.task);
console.log('現在のToDo一覧：', this.todoList);
this.previous_num = this.task;
this.drawChart();
},
// 以下を追加、関数名はなんでもよい
clearAll: function() {
this.todoList = [['月', '数量'],
['１月', 65],
['２月', 59],
['３月', 80],
['４月', 81],
['５月', 56],
['６月', 55],
['７月', 55],
['８月', 55],
['９月', 55],
['１０月', 0],
['１１月', 0],
['１２月', 0]];
console.log('全てのToDoが消去されました');
this.drawChart();
},
drawChart: function() {
console.log('drawChart');
//オプション設定
var options = {
'title': '注文数',
};
//月別データ
var array = this.todoList;
var data = google.visualization.arrayToDataTable(array);
var stage = document.getElementById('stage');
//グラフの種類を設定
var chart = new google.visualization.ColumnChart(stage);
//データとオプションを設定
chart.draw(data, options);
}
},
});
Reference
이 문제에 관하여(화면에 입력된 주문 수를 그래프에 반영하는 웹 앱(임시)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Sugizo50073508/items/4530088cc27f6cc7c322
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
· DB를 사용하여 데이터 출입
・달을 선택한다. 이번은 10월에만 추가된다. . .
・「수치를 클리어.」어디야! 라고 생각하는 것을 해소한다. 지금은 10월의 수치가 뿌리 내려 사라진다.
・목표의 수치의 설정이나, 거기와의 차이의 묘화
・그리기 방법의 선정 절대 더 예쁘고 세련된 녀석 있는 야로!
환경
편집자: codepen
CSS: bootstrap
사용 라이브러리
vue.js
loader.js gstatic
출처
HTML 부분은 이쪽↓
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - chart</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
</head>
<body>
<!-- partial:index.partial.html -->
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<!-- 全体をVue.js有効にする -->
<div class="container text-center text-white bg-dark" id="app">
<!-- タイトル行 -->
<div class="row my-3">
<div class="col-sm-6 mx-auto"><h1>一日の終わりに注文数を入力</h1></div>
</div>
<!-- タスク入力行 -->
<div class="row my-3">
<div class="col-sm-6 mx-auto">
<input v-model:value="task" placeholder="注文数を入力" class="form-control"><br>
直前に追加した注文数：{{ previous_num }} <button v-on:click="addTask" class="btn btn-primary">追加</button>
</div>
</div>
<!-- 全てのタスクをクリアするボタン -->
<div class="row my-3">
<div class="col-sm-6 mx-auto">
<button v-on:click="clearAll" class="btn btn-danger">数値をクリア</button>
</div>
</div>
<!-- タスク追加されると表示される部分 -->
<div class="row my-3">
<div class="col-sm-6 mx-auto">
</div>
</div>
<div class="col-lg-10 mx-auto" id="stage"></div>
</div><!-- 全体ここまで -->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue-chartjs/3.5.1/vue-chartjs.min.js'></script><script src="./script.js"></script>
</body>
</html>
JS 부분은 이쪽↓
//必要なパッケージの読み込み
google.charts.load('current', {packages: ['corechart']});
// google.charts.setOnLoadCallback(drawChart);
const app = new Vue({
el: '#app', // Vueが管理する一番外側のDOM要素
data: {
// Vue内部で使いたい変数は全てこの中に定義する
task: '',
todoList: [['月', '数量'],
['１月', 65],
['２月', 59],
['３月', 80],
['４月', 81],
['５月', 56],
['６月', 55],
['７月', 55],
['８月', 55],
['９月', 55],
['１０月', 0],
['１１月', 0],
['１２月', 0]], // これは配列
chart:"",
previous_num:0,
},
methods: {
// 関数はここ
addTask: function() {
console.log('次のタスクが追加されました：', this.task);
// 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
this.todoList[10][1] = Number(this.todoList[10][1]) + Number(this.task);
console.log('現在のToDo一覧：', this.todoList);
this.previous_num = this.task;
this.drawChart();
},
// 以下を追加、関数名はなんでもよい
clearAll: function() {
this.todoList = [['月', '数量'],
['１月', 65],
['２月', 59],
['３月', 80],
['４月', 81],
['５月', 56],
['６月', 55],
['７月', 55],
['８月', 55],
['９月', 55],
['１０月', 0],
['１１月', 0],
['１２月', 0]];
console.log('全てのToDoが消去されました');
this.drawChart();
},
drawChart: function() {
console.log('drawChart');
//オプション設定
var options = {
'title': '注文数',
};
//月別データ
var array = this.todoList;
var data = google.visualization.arrayToDataTable(array);
var stage = document.getElementById('stage');
//グラフの種類を設定
var chart = new google.visualization.ColumnChart(stage);
//データとオプションを設定
chart.draw(data, options);
}
},
});
Reference
이 문제에 관하여(화면에 입력된 주문 수를 그래프에 반영하는 웹 앱(임시)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Sugizo50073508/items/4530088cc27f6cc7c322
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
HTML 부분은 이쪽↓
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - chart</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
</head>
<body>
<!-- partial:index.partial.html -->
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<!-- 全体をVue.js有効にする -->
<div class="container text-center text-white bg-dark" id="app">
<!-- タイトル行 -->
<div class="row my-3">
<div class="col-sm-6 mx-auto"><h1>一日の終わりに注文数を入力</h1></div>
</div>
<!-- タスク入力行 -->
<div class="row my-3">
<div class="col-sm-6 mx-auto">
<input v-model:value="task" placeholder="注文数を入力" class="form-control"><br>
直前に追加した注文数：{{ previous_num }} <button v-on:click="addTask" class="btn btn-primary">追加</button>
</div>
</div>
<!-- 全てのタスクをクリアするボタン -->
<div class="row my-3">
<div class="col-sm-6 mx-auto">
<button v-on:click="clearAll" class="btn btn-danger">数値をクリア</button>
</div>
</div>
<!-- タスク追加されると表示される部分 -->
<div class="row my-3">
<div class="col-sm-6 mx-auto">
</div>
</div>
<div class="col-lg-10 mx-auto" id="stage"></div>
</div><!-- 全体ここまで -->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue-chartjs/3.5.1/vue-chartjs.min.js'></script><script src="./script.js"></script>
</body>
</html>
JS 부분은 이쪽↓
//必要なパッケージの読み込み
google.charts.load('current', {packages: ['corechart']});
// google.charts.setOnLoadCallback(drawChart);
const app = new Vue({
el: '#app', // Vueが管理する一番外側のDOM要素
data: {
// Vue内部で使いたい変数は全てこの中に定義する
task: '',
todoList: [['月', '数量'],
['１月', 65],
['２月', 59],
['３月', 80],
['４月', 81],
['５月', 56],
['６月', 55],
['７月', 55],
['８月', 55],
['９月', 55],
['１０月', 0],
['１１月', 0],
['１２月', 0]], // これは配列
chart:"",
previous_num:0,
},
methods: {
// 関数はここ
addTask: function() {
console.log('次のタスクが追加されました：', this.task);
// 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
this.todoList[10][1] = Number(this.todoList[10][1]) + Number(this.task);
console.log('現在のToDo一覧：', this.todoList);
this.previous_num = this.task;
this.drawChart();
},
// 以下を追加、関数名はなんでもよい
clearAll: function() {
this.todoList = [['月', '数量'],
['１月', 65],
['２月', 59],
['３月', 80],
['４月', 81],
['５月', 56],
['６月', 55],
['７月', 55],
['８月', 55],
['９月', 55],
['１０月', 0],
['１１月', 0],
['１２月', 0]];
console.log('全てのToDoが消去されました');
this.drawChart();
},
drawChart: function() {
console.log('drawChart');
//オプション設定
var options = {
'title': '注文数',
};
//月別データ
var array = this.todoList;
var data = google.visualization.arrayToDataTable(array);
var stage = document.getElementById('stage');
//グラフの種類を設定
var chart = new google.visualization.ColumnChart(stage);
//データとオプションを設定
chart.draw(data, options);
}
},
});
Reference
이 문제에 관하여(화면에 입력된 주문 수를 그래프에 반영하는 웹 앱(임시)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Sugizo50073508/items/4530088cc27f6cc7c322텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
