Question

我有一个文件组件，它使用Chart.Js为一些硬编码数据呈现简单的可视化。我在index.html的head部分通过CDN调用Chart.Js库。

我正在使用官方的Webpack模板。

出于某种原因，除非我点击Vue Dev Tools扩展程序中的组件，否则图表不会呈现。

我已经尝试将其从计算机更改为已创建/已安装且无效。

这是我的代码。任何有助于正确渲染的帮助都会非常感激。

<template lang="html">
  <div>
    <div class="row">
      <div class="col-sm-12 col-md-4">
        <canvas id="carbChart"></canvas>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      calories: 3000,
      childSex: 'male',
      childAge: 'eighteen'
    }
  },
  computed: {
    nutrientCharts: function() {
      let calories = this.calories;

      let carbCtx = document.getElementById('carbChart').getContext('2d');

      let carbChart = new Chart(carbCtx, {
        type: 'doughnut',
        data: {
          labels: ['Low', 'Good', 'Too Much'],
          datasets: [{
            label: 'carbs',
            data: [calories * .45, calories * .65, calories * 1],
            backgroundColor: ['orange', 'blue', 'red']
          }]
        }
      });
    }
  }
}
</script>

Answer 1

您已在computed属性中定义了该方法，但从未使用过它。

假设你想让它运行，请在挂载时加载图表：

mounted() {
  this.nutrientCharts();
},
methods: {
  nutrientCharts: function () {
    // your code here
  }
}

VueJs / ChartJs - 单个文件组件计算属性仅在我单击Vue Dev Tools

1 个答案: