来自 Vue-chartjs 的条形图不呈现

Question

在我的 Vue 项目中，我无法呈现我使用 vue-chartjs 创建的条形图我试过重新安装 vue-chartjs 并更新我的组件，但没有任何效果。请问是组件本身的问题还是我渲染的方式不对？

条形图组件

<script>
import { Bar } from "vue-chartjs";

export default {
  extends: Bar,
  mounted() {
    this.renderChart(
      {
        labels: [
          "London",
          "New York",
          "New Zeland",
        ],
        datasets: [
          {
            label: "Data One",
            backgroundColor: "#f87979",
            data: [
              83,
              26,
              4,
            ]
          }
        ]
      },
      { responsive: true, maintainAspectRatio: false, height: 200 }
    );
  }
};
</script>

主页组件：

  <template>
  <v-container class="grey lighten-5">
      <v-col cols="12" sm="8">
        <v-card class="pa-2" outlined align="center">
          <BarChart/>
          <div>CHART</div>
        </v-card>
      </v-col>
  </v-container>
</template>

<script>
import BarChart from "@/components/charts/BarChart";

export default {
  components: {
    BarChart
  },
};
</script>

<style></style>

Answer 1

方法中的错误this.renderChart()。我不得不查看文档以弄清楚它应该如何构建。 this.renderChart() 方法由 Bar 组件提供，接受两个参数：都是对象。第一个是您的图表数据，第二个是选项对象。更多文档 - https://www.chartjs.org/docs/latest/charts/bar.html

这对我有用：

<script>
    import { Bar } from "vue-chartjs";
    
    export default {
      extends: Bar,
      mounted() {
        this.renderChart(
          {
            labels: [
              "London",
              "New York",
              "New Zeland",
            ],
            datasets: [
              {
                label: "Data One",
                backgroundColor: "#f87979",
                data: [
                  83,
                  26,
                  4,
                ]
              }
            ]
          },
          { responsive: true }
        );
      }
    };
    </script>

来自 Vue-chartjs 的条形图不呈现

Bar chart from Vue-chartjs doesn't render

render

vue.js

chart.js

vue-chartjs

vuetify.js