반응형
vuejs 차트j에 json 데이터 표시
나는 json 파일을 읽고 VueJs를 사용하여 Chartjs에 데이터를 플로팅하고 싶다.
나는 Json 파일을 통해 약간의 데이터를 표시할 수 있었지만, Json 파일은 표시할 수 없었다.
지금까지 나는 이렇게 생긴 vue.app을 가지고 있다.
export default {
name: 'app',
data () {
return {
labelschart: [],
datachart: [],
testLabels: ['10/01/2017 02:25:34', '11/01/2017 02:25:34', '12/01/2017 02:25:34', '13/01/2017 02:25:34', '14/01/2017 02:25:34'],
testData: [93.5, 93.4, 93.3, 93.4, 93.5]
...
computed: {
lineData () {
return {
labels: this.testLabels,
datasets: [
{
label: 'Instrument',
backgroundColor: '#36A2EB',
data: this.testData,
fill: 'False',
borderColor: 'blue'
}
]
}
}
내 라인 차트vue는 다음과 같다.
<script>
import { Line, mixins } from 'vue-chartjs'
export default Line.extend({
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
mounted () {
this.renderChart(this.chartData, this.options)
}
})
</script>
태그는 다음과 같다.
<line-chart class="card-content" :chartData="lineData" :options="options"></line-chart>
json 파일에서 레이블 차트와 데이터차트를 어떻게 채울 수 있는가?
고마워요.
참조URL: https://stackoverflow.com/questions/46922188/display-json-data-on-vuejs-chartjs
반응형
'programing' 카테고리의 다른 글
VueX 상태에서 값을 직접 설정하는 방법 (0) | 2022.04.12 |
---|---|
Azure Web App에서 Vue Router HTML5 History 모드를 사용한 URL 재작성 문제 (0) | 2022.04.12 |
계산된 속성에서 예기치 않은 부작용을 방지하는 방법 - VueJs (0) | 2022.04.12 |
Vue.js2 - 상위 구성 요소에 의해 $emit 이벤트가 캡처되지 않음 (0) | 2022.04.12 |
VueJ에서 중첩된 자식 구성 요소에 액세스s (0) | 2022.04.11 |