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

所以现在我开始工作了：

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

  });

Answer 2

这里是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>

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

Vue and Chartjs - Running a simple example of vue-chartjs

vue.js

chart.js

vuejs2

vue-chartjs

第 1 步

第 2 步

更新