programing

vuejs 차트j에 json 데이터 표시

prostudy 2022. 4. 12. 22:27
반응형

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

반응형