首先,我想强调的是,我是一个完全新的Vue(和webdev一般)。
我必须创建一个UI,在其中显示从API获取的一些数据。但是我在使用chart.js时遇到了一些问题:我无法在属性更改时更新图表。目前,我的设置如下:
Card.vue:
<script>
import DoughnutChart from './DoughnutChart.js'
export default {
name: 'Card',
components: {
DoughnutChart
},
props: ['scheda'],
created() {
console.log(this.scheda)
}
}
</script>
<template>
<DoughnutChart type="abcd" :chartData="this.scheda"/>
</template>
DoughnutChart.js:
import { defineComponent, h } from 'vue'
import { Doughnut } from 'vue-chartjs'
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
ArcElement,
CategoryScale
} from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
export default defineComponent({
name: 'DoughnutChart',
components: {
Doughnut
},
props: ['type', 'chartData'],
setup(props) {
const chartData = {
labels: ['A', 'B'],
datasets: [
{
backgroundColor: ["#ff3333", "#131b2e"],
cutout: "75%",
borderWidth: 0,
data: [props.chartData.value, (100 - props.chartData.value)]
}
]
}
const chartOptions = {
plugins: {
legend: {
display: false
}
},
responsive: true,
maintainAspectRatio: false
}
return () =>
h(Doughnut, {
chartData,
chartOptions
})
}
})
this.scheda
是无功值,当它改变时,图表应相应地更新。
我已经阅读了文档,但我就是无法理解它。我也尝试在互联网上搜索,但所有示例都引用了旧版本的图表库。有人能帮助我解决这个问题吗?谢谢!
1条答案
按热度按时间dgtucam11#
如果你想创建一个图表js并与view集成,你可以在vue js flow之外的js上创建你的
canvas
,然后在vue内部获取元素引用,然后集成它,在vue内部呈现组件的大问题是你需要更新你的图表,它可能会导致画布上出现意外行为。因为像Vue这样的工具是为了刷新html而设计的,画布总是一个单一的html标签,在js中有很多交互性(不是太多html)。速度图
您可以安装vue-chart.js
它支持数据更新,您还可以访问图表参考。
**正在更新图表:**https:vue-chartjs.org/guide/#updating-charts
**访问引用:**https:vue-chartjs.org/guide/#access-to-chart-instance