尝试在vue-chartjs图表中实现chartjs-plugin-datalabels时出现的问题

pqwbnv8z  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(260)

我正在尝试安装chartjs-plugin-datalabels。我正在使用vue-chartjs,需要包括数据标签的插件(如果有人可以推荐其他任何东西,它将不胜感激。)
我目前的所有版本是chart.js@3.8.0 vue-chartjs@3.5.1 vue@2.6.14
他是我的代码参考:

<script>
import { Bar, mixins } from "vue-chartjs";
import ChartDataLabels from 'chartjs-plugin-datalabels';
Chart.register(ChartDataLabels);
export default {
  extends: Bar,
  props: ["options"],
  mixins: [mixins.reactiveProp],
  mounted() {
    this.renderChart(this.chartData, this.options);
  },
};
</script>

我的问题:下载chartjs-plugin-datalabels后,我的图表都不能用了。我现在在加载页面时遇到这些错误:

我有一种感觉,这个问题很可能是由于版本和版本要求不一致。有什么办法可以解决这个问题吗?
此外,如果有一个替代的方式,有类似的数据标签,不需要插件Id必须喜欢避免这个插件的头痛。我所需的外观是有一个甜甜圈图2数据集,其中一个是作为一个数字和其他作为一个%,即:

pokxtpni

pokxtpni1#

您使用的是chart.js和vue-chart.js的不兼容版本。
Vue-chart.js v3仅适用于Chart.js V2。
对于Chart.js V3,您需要使用vue-chart.js V4。
如果您决定将vue-chart.js更新为V4以导入'vue-chartjs/legacy'包中的所有内容,请确保您使用的是Vue V2而不是V3。
因此,您的导入将如下所示:

import { Bar } from 'vue-chartjs/legacy'

相关问题