vue 3에서 vue-chartjs 사용 : createElement는 함수가 아닙니다.

vue 3에서 vue-chartjs 사용 : createElement는 함수가 아닙니다.

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)

내 차트를 표시하는 App.vue:

<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 생태계가 더 완벽해질 때까지 기다려야 합니까?

이 문제에 따르면 이 라이브러리는 아직 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정의되어 있지 않다

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를 참조하십시오.

언급URL : https://stackoverflow.com/questions/64114215/using-vue-chartjs-in-vue-3-createelement-is-not-a-function