在vuejs chartjs上显示json数据

时间:2017-10-25 00:50:01

标签: javascript vue.js vuejs2 chart.js

我想阅读一个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]

...

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

我的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>

这是标签:

<line-chart class="card-content" :chartData="lineData" :options="options"></line-chart>

如何从json文件中填写 labelschart datachart

谢谢,

0 个答案:

没有答案