文章/答案/技术大牛

发布

社区首页 >问答首页 >Vue-chartjs中的条形图不呈现

问Vue-chartjs中的条形图不呈现
EN

Stack Overflow用户

提问于 2021-07-21 15:16:49

回答 1查看 797关注 0票数 1

在我的Vue项目中，我无法呈现我使用vue-chartjs创建的条形图，我尝试重新安装vue-chartjs并更新我的组件，但是没有工作。我想知道是组件本身的问题还是我以错误的方式呈现？

BarChart组件

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

vue.js

chart.js

vuetify.js

render

vue-chartjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-21 15:43:56

this.renderChart().方法中的错误我必须看一看文档，才能确定它应该如何构造。this.renderChart()方法由Bar组件提供，并接受两个参数:这两个参数都是对象。第一个是图表数据，第二个是options对象。更多在docs - 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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68472155

复制

相似问题

问Vue-chartjs中的条形图不呈现
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue-chartjs中的条形图不呈现EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue-chartjs中的条形图不呈现
EN