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

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>