Vue and 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 标记，它将覆盖基本图表中定义的模板，您正在扩展该模板。这就是为什么你什么都看不到的原因;)

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

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

第二步

导入并提供数据。

像你一样:)

---

更新

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

  });