在vuejs Chartjs上显示json数据

Wes*_*ey 5 javascript vue.js chart.js vuejs2

我想读取 json 文件并使用 VueJs 在 Chartjs 上绘制数据。

我能够显示一些数据,但不能显示 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]
Run Code Online (Sandbox Code Playgroud)

...

computed: {
    lineData () {
      return {
        labels: this.testLabels,
        datasets: [
          {
            label: 'Instrument',
            backgroundColor: '#36A2EB',
            data: this.testData,
            fill: 'False',
            borderColor: 'blue'
          }
        ]
      }
    }
Run Code Online (Sandbox Code Playgroud)

我的 linechart.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>
Run Code Online (Sandbox Code Playgroud)

这是标签:

<line-chart class="card-content" :chartData="lineData" :options="options"></line-chart>
Run Code Online (Sandbox Code Playgroud)

如何从 json 文件填充标签图数据图?

谢谢,