헌혈 데이터를 대시보드 관리 화면에 그래프 표시(Vue.js)
소개
이쪽의 투고를 배견했습니다.
100회 굉장하다고 생각하면서, 자신의 헌혈의 데이터를 확인해 보았는데, 30회 약이라고 하는 곳이었습니다. 100회에는 멀리 미치지 않습니다만, 데이터를 표시·조사하려면 뭐 뭐의 수일까라고 생각했습니다.
또, 이전부터 그래프나 숫자가 멋지게 늘어선 대시보드(관리 화면)를 작성하고 싶었습니다만, 데이터로서 무엇을 표시하면 좋을까 생각했습니다. 이것은 꽤 좋은 데이터가 아닐까 생각했기 때문에, 헌혈 데이터를 한 화면에서 그래프로 볼 수 있도록 하고 싶습니다.
Vue.js 템플릿을 다운로드하고 필요한 곳을 변경하면서 만들고 싶습니다. Google 검색에서 "Vue.js 대시보드 템플릿"과 같은 느낌으로 조사하면 좋은 느낌의 것을 많이 찾을 수 있습니다.
이번에 사용한 것은 이쪽
htps : // 이것 네. 이오/ゔ에/
# clone the repo
$ git clone https://github.com/coreui/coreui-free-vue-admin-template.git CoreUI-Vue
# go into app's directory
$ cd CoreUI-Vue
# install app's dependencies
$ npm install
# serve with hot reload at localhost:8080
$ npm run serve
데이터
헌혈 사이트를 확인하면서 GoogleSpreadSheet에 데이터를 만듭니다. (여기는 앞의 기사를 참고로 스크래핑에서도 OK일까 생각합니다만, 나는 손으로 작성했습니다)
자신의 검사 결과를 바탕으로 적당히 내용의 수치를 변경하여 샘플 데이터로 합니다.
데이터의 갱신을 자동으로 실시하고 싶은 경우는, 참고 기사대로, 스크래핑 하는 정도 밖에 생각하지 않습니다.
거기까지 빈번하게 갱신하지 않아도 되는 경우는, 헌혈을 할 때마다 스프레드시트를 손으로 갱신해도 좋을까라고는 생각합니다. (향후 얼마나 자주 헌혈할지에 따라 다르지만, 값을 갱신하면 그래프에 반영하므로 그 근처는 동기 부여가 될지도 모릅니다)
데모 사이트
데모 사이트는 이쪽
(헌혈 데이터는, 자신의 결과를 베이스로 적당하게 수치를 변경하고 있는 샘플 데이터)
①Dashboard：현재의 헌혈 회수・100회까지 앞으로 몇회・전회의 헌혈일・혈압/맥박에 더해 각 검사 결과 데이터 15 그래프
② 생화학 검사 결과 : 7 그래프 (설명 포함)
③혈구계수검사 결과：8 그래프(설명 첨부)
코드(API에 의한 데이터 취득 및 그래프 파라미터 세트 부분)
그래프 데이터는, 부모 컴퍼넌트로 axios에서 일괄로 취득합니다. 또, 각 그래프의 타이틀이나 설명, 그래프에 필요한 값을 파라미터화해, 오브젝트에 갖게 해 두어, 아이 컴퍼넌트에 건네주는 형태입니다 (Props를 사용한다).
샘플
sample.vue<script>
export default {
// 省略
data () {
return {
// 省略
}
},
created () {
axios.get(apiurl).then(response => {
this.apidata = response.data.values
this.makeInfo() // ヘッダー情報・説明テキストの取得設定
})
this.dval1 = {
label1: '血圧(最高)', colum1: 3,
label2: '血圧(最低)', colum2: 4,
label3: '脈拍', colum3: 5,
maxGraph: 180,
minGraph: 30
}
this.dval2 = {
title:'(2) ALT(GPT)', label: 'ALT(GPT)', colum: 6, maxValue: 49, minValue: 8, maxGraph: 70, minGraph: 0
}
this.dval3 = {
title:'(3) γ-GTP', label: 'γ-GTP', colum: 7, maxValue: 68, minValue: 9, maxGraph: 80, minGraph: 0
}
// 以下省略
},
methods: {
// 説明テキストの取得設定
makeInfo () {
for (var i = 1; i <= this.apidata.length; i++) {
if (i === 4) {
var k = 1
for (var j = 0; j <= 20; j++) {
if (j > 5) {
var additem = {
id: k,
text: this.apidata[3][j]
}
this.items.push(additem)
k = k + 1
}
}
}
// 最終行の回数と日付の設定
if (i === this.apidata.length) {
this.numbertime = this.apidata[i-1][0]
this.lastdate = this.apidata[i-1][1]
this.moretime = 100 - this.numbertime
}
}
}
}
}
</script>
요약
그래프 데이터는, 부모 컴퍼넌트로 axios에서 일괄로 취득합니다. 또, 각 그래프의 타이틀이나 설명, 그래프에 필요한 값을 파라미터화해, 오브젝트에 갖게 해 두어, 아이 컴퍼넌트에 건네주는 형태입니다 (Props를 사용한다).
샘플
sample.vue
<script>
export default {
// 省略
data () {
return {
// 省略
}
},
created () {
axios.get(apiurl).then(response => {
this.apidata = response.data.values
this.makeInfo() // ヘッダー情報・説明テキストの取得設定
})
this.dval1 = {
label1: '血圧(最高)', colum1: 3,
label2: '血圧(最低)', colum2: 4,
label3: '脈拍', colum3: 5,
maxGraph: 180,
minGraph: 30
}
this.dval2 = {
title:'(2) ALT(GPT)', label: 'ALT(GPT)', colum: 6, maxValue: 49, minValue: 8, maxGraph: 70, minGraph: 0
}
this.dval3 = {
title:'(3) γ-GTP', label: 'γ-GTP', colum: 7, maxValue: 68, minValue: 9, maxGraph: 80, minGraph: 0
}
// 以下省略
},
methods: {
// 説明テキストの取得設定
makeInfo () {
for (var i = 1; i <= this.apidata.length; i++) {
if (i === 4) {
var k = 1
for (var j = 0; j <= 20; j++) {
if (j > 5) {
var additem = {
id: k,
text: this.apidata[3][j]
}
this.items.push(additem)
k = k + 1
}
}
}
// 最終行の回数と日付の設定
if (i === this.apidata.length) {
this.numbertime = this.apidata[i-1][0]
this.lastdate = this.apidata[i-1][1]
this.moretime = 100 - this.numbertime
}
}
}
}
}
</script>
요약
역시 숫자의 배열보다는 그래프 쪽이 알기 쉽고, 주의해야 할 지표도 확실히 판단할 수 있습니다.
헌혈 사이트에서도 이런 그래프를 볼 수 있으면 좋겠다, 라고 생각하는 화면을 만들 수 있었습니다. (본가는 직전 3회분밖에 볼 수 없습니다. 앞으로 모든 데이터를 볼 수 있게 되면 됩니다만)
대시보드를 만들고 싶었는데 좋은 소재가 없었기 때문에 아주 좋은 예가 되었습니다.
마지막으로
Reference
이 문제에 관하여(헌혈 데이터를 대시보드 관리 화면에 그래프 표시(Vue.js)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yoshi_yast/items/557a08fb9ddb368e6861텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
