1

我正在尝试将 Chart.js 与 Vue.js 一起使用，这就是我正在编译的内容，但我没有看到 GUI 上显示任何内容。

这是我的文件 DonutChart.vue：

<template>
 // NOT SURE IF SOMETHING SHOULD GO HERE
</template>

<script>
  import {Bar} from 'vue-chartjs'
  // import the component - chart you need

  export default Bar.extend({
    mounted () {
      // Overwriting base render method with actual data.
      this.renderChart({
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        datasets: [
          {
            label: 'News reports',
            backgroundColor: '#3c8dbc',
            data: [12, 20, 12, 18, 10, 6, 9, 32, 29, 19, 12, 11]
          }
        ]
      },)
    }
  });
</script>

这是父组件“Usage.vue”：

<template>
      <h1>USAGE</h1>
      <st-donut-chart></st-donut-chart>
</template>

<script>
  import Vue from 'vue';
  import Filter from './shared/filter/Filter';
  import DonutChart from './DonutChart'

  export default new Vue({
    name: 'st-usage',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    components: {
      'st-filter': Filter,
      'st-donut-chart': DonutChart,
    }

  });
</script>

DonutChart.vue 和 Usage.vue 在同一个目录下：

在此处输入图像描述

4

2 回答 2

11

vue-chartjs 作者在这里。

好吧，这对初学者来说有点混乱。不过vue-chartjs是在利用Vue.extend()。

这就是为什么您必须扩展导入的组件。

第1步

  • 创建您自己的组件并扩展基本图表。这样你就可以更好地控制一切。

你DonutChart.vue几乎是对的。但是你必须<template> 从你的组件中删除。由于 Vue.extend() 您正在扩展基本组件。所以你可以访问那里定义的道具、方法等。但是没有办法扩展templates。因此，如果您template在组件中添加标签，它将覆盖您正在扩展的基本图表中定义的模板。这就是为什么你什么都看不到的原因 ;)

你的Chart.vue：

<script>
  // Import the base chart
  import {Bar} from 'vue-chartjs'

  // Extend it
  export default Bar.extend({
    props: ['chartdata', 'options'],
    mounted () {
      // Overwriting base render method with actual data and options
      this.renderChart(this.chartdata, this.options)
    }
  })
</script>

现在您有了图表组件。您可以在其中放置更多登录信息，定义一些样式或选项。

第2步

导入它并提供数据。

像你一样:)

更新

在 vue-chartjs 的第 3 版中，创建方式发生了变化。现在它更像 vue。

<script>
  // Import the base chart
  import {Bar} from 'vue-chartjs'

  // Extend it
  export default {
    extends: Bar,
    props: ['chartdata', 'options'],
    mounted () {
      // Overwriting base render method with actual data and options
      this.renderChart(this.chartdata, this.options)
    }
  }
</script>

或者你可以使用mixins

<script>
  // Import the base chart
  import {Bar} from 'vue-chartjs'

  // Extend it
  export default {
    mixins: [Bar],
    props: ['chartdata', 'options'],
    mounted () {
      // Overwriting base render method with actual data and options
      this.renderChart(this.chartdata, this.options)
    }
  }
</script>
于 2017-06-10T15:27:09.963 回答
0

所以现在我开始工作了：

  import DonutChart from './DonutChart'

  export default ({  //<= Notice change here
    name: 'st-usage',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    components: {
      'st-filter': Filter,
      'line-example':LineExample,
      'st-donut-chart':DonutChart,
    }

  });
于 2017-05-18T07:50:32.737 回答