ChartJS 使用VUE 3中的VUE图表：createElement不是函数

r7s23pms 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(372)

我使用的是Vue.js 3，但由于以下错误，我无法使用Vue-chartjs制作图表：

Uncaught TypeError: createElement is not a function
    at Proxy.render (BaseCharts.js?86fc:8)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:673)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4475)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4458)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4416)
    at processComponent (runtime-core.esm-bundler.js?5c40:4376)
    at patch (runtime-core.esm-bundler.js?5c40:3991)
    at mountChildren (runtime-core.esm-bundler.js?5c40:4180)

这是显示我的图表的应用程序：

<template>
  <line-chart />
</template>
<script>
import LineChart from "./components/Chart";
export default {
  name: "App",
  components: {
    LineChart
  }
};
</script>

这是一个呈现折线图的Chart.vue：

<script>
import { Line } from "vue-chartjs";
export default {
  extends: Line,
  data: () => ({
    chartdata: {
      labels: ["January", "February"],
      datasets: [
        {
          label: "Data One",
          backgroundColor: "#f87979",
          data: [40, 20]
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    }
  }),
  mounted() {
    this.renderChart(this.chartdata, this.options);
  }
};
</script>

我已经用各种形式的数据尝试过这一点，但显然，问题在别处。我必须等待vue.js 3生态系统变得更加完整吗？

chart.js

来源：https://stackoverflow.com/questions/64114215/using-vue-chartjs-in-vue-3-createelement-is-not-a-function

2条答案

按热度按时间

9q78igpj1#

2022年更新

该库现在支持vue 3，您可以按如下方式安装：

pnpm add vue-chartjs chart.js
# or
yarn add vue-chartjs chart.js
# or
npm i vue-chartjs chart.js

"旧答案"
根据此issue，此库尚不支持Vue 3，此错误的根源可在此处解释：
在VUE 2中，我们执行以下操作来创建渲染函数：

export default {
  render(createElement ) { // createElement  could be written h
    return createElement('div')
  }
}

在Vue 3中：

import { h } from 'vue'
export default {
  render() {
    return h('div')
  }
}

这意味着createElement未定义

展开查看全部

赞(0）回复(0）举报 2022-11-06

rdlzhqv92#

https://github.com/apertureless/vue-chartjs
Vue图表似乎未准备好用于vue3
兼容性

v1 later @legacy
    Vue.js 1.x
v2 later
    Vue.js 2.x

关于vue3的讨论在这里：https://github.com/apertureless/vue-chartjs/issues/601和此处：https://github.com/apertureless/vue-chartjs/issues/637

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 使用VUE 3中的VUE图表：createElement不是函数

2条答案

相关问题

热门标签

最新问答