期望的结果
在单个页面上显示相同图表类型的多个实例。示例图像包含从下面的代码中剥离的附加数据。
初始图表画布对象是使用Chart.vue
组件创建的:
<!-- Chart.vue -->
<template>
<div :class="chartType">
<canvas style="height: 100%; width: 100%;"></canvas>
</div>
</template>
<script>
import Chart from "chart.js/auto";
Chart.defaults.elements.point.radius = 0;
export default {
props:{
chartType:String,
chartData:Object,
chartOptions:Object
},
methods: {
chartConstructor(chartType, chartData, chartOptions) {
const chartElement = document.querySelector(`.${this.chartType} canvas`);
const chart = new Chart(chartElement, {
type: chartType,
data: chartData,
options: chartOptions,
});
},
},
mounted(){
let {chartType,chartData,chartOptions} = this;
this.chartConstructor(chartType, chartData, chartOptions);
}
};
</script>
图表选项和数据当前建立在“图表类型”组件中,在这种情况下是组合的条形图和折线图BarLine.vue
(其他图表类型还有其他组件)。尽管此处提供了数据,但数据最终将来自外部。
<!-- BarLine.vue -->
<template>
<div class="chart">
<Chart id="chartImage" :chartData="chartData" :chartOptions="chartOptions" :chartType="chartType" :style="{ width: chartWidth + 'px', height: chartHeight + 'px' }"/>
</div>
</template>
<script>
import Chart from "@/components/Chart.vue";
export default {
props:{
chartWidth: {default: 500, type: Number},
chartHeight: {default: 250, type: Number},
},
components: {
Chart,
},
data() {
return {
chartType: "bar",
chartData: {
labels: ["T", "F", "S", "S", "M", "T", "W", "T"],
datasets: [
{
type: 'line',
backgroundColor: "rgba(128, 0, 0, 0.2)",
borderColor: "rgba(128, 0, 0, 1)",
borderRadius: 3,
borderWidth: 1,
data: [55, 43, 38, 38, 38, 53, 54, 42],
hoverBackgroundColor: "rgba(128, 0, 0, 0.5)",
label: "H",
yAxisID: 'y',
},
{
type: 'bar',
backgroundColor: "rgba(0, 200, 255, 0.2)",
borderColor: "rgb(0,200,255, 0.6)",
borderRadius: 5,
borderWidth: 1,
data: [100, 50, 0, 40, 0, 0, 40, 0],
hoverBackgroundColor: "rgba(0, 200, 255, 0.5)",
label: "P",
yAxisID: 'y1',
}
]
},
chartOptions: {
layout: {
padding: {
left: 5,
right: 20,
top: 15,
}
},
plugins: {
tooltip: {
position: 'average',
mode: 'index',
},
legend: {
position: 'bottom',
labels: {
boxWidth: 20,
},
},
},
responsive: true,
scales: {
x: {
barPercentage: 0.5,
categoryPercentage: 0.5,
stacked: false,
fontSize: 5,
grid: { // x grid doesn't make much sense for this chart.
color: "#333333",
display: true,
borderDash: [1, 2],
},
},
y: {
grid:{
color: "#333333",
display: true,
borderDash: [1, 2],
},
ticks: {
stepSize: 20,
},
barPercentage: 0,
categoryPercentage: 0,
fontSize: 5,
stacked: false,
position: 'left',
},
y1: {
ticks: {
stepSize: 25,
},
barPercentage: 0,
categoryPercentage: 0,
fontSize: 5,
stacked: false,
position: 'right',
min: 0,
max: 100,
}
},
maintainAspectRatio: false,
animation: {
duration: 2000,
easing:'easeInOutQuart'
}
},
};
},
};
</script>
然后图表对象显示在Home.vue
(最终App.vue
):
<!-- Home.vue -->
<template>
<div class="home">
<TileFormat class="A" tileSize="tile-double" :showButton="false" :yOverflow="false" header="A">
<BarLine class="ChartBarTile" :chartHeight="160" :chartWidth="375" style="display: flex; justify-content: center;"/>
</TileFormat>
<TileFormat class="B" tileSize="tile-double" :showButton="false" :yOverflow="false" header="B">
This will be a second chart just as soon as I figure out how to do it.
</TileFormat>
</div>
</template>
<script>
import TileFormat from '@/components/Tile.vue'
import BarLine from '@/components/BarLine.vue'
export default {
components: {
TileFormat,
BarLine,
}
}
</script>
我试过的:
控制台报告“画布已在使用中。在重新使用画布之前,必须销毁 ID 为‘0’的图表”。我试过的:
- 多次不同的尝试在调用之间破坏画布。
- 为每个组件创建唯一的图表 ID。
- 重复的图表类型组件。
- 将
Chart.vue
代码移动到图表类型组件 Vue 文件中。 - 制作显示的不同类型的第二个图表对象。