Question

我正在尝试将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位于同一目录：

Answer 1

vue-chartjs作者在这里。

这对初学者来说有点混乱。但vue-chartjs正在使用Vue.extend()。

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

第1步

创建您自己的组件并扩展基础图表。通过这种方式，您可以更好地控制一切。

你的DonutChart.vue几乎是正确的。但您必须从组件中删除<template>。由于Vue.extend（），您正在扩展基本组件。所以你可以访问那里定义的道具，方法等。但是无法扩展templates。因此，如果您在组件中使用template标记，它将覆盖您在扩展的基本图表中定义的模板。这就是为什么你看不到任何东西;）

YourChart.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>

Answer 2

所以现在我开始工作了：

  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,
    }

  });

Vue和Chartjs - 运行一个简单的vue-chartjs示例

2 个答案:

第1步

第2步

更新