File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
2024-11-19
<template>
<div ref="Dounutchart" style="width: 500px; height: 500px;"></div>
</template>
<script>
import * as am5 from "@amcharts/amcharts5";
import * as am5percent from "@amcharts/amcharts5/percent";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
import axios from "axios";
export default {
name: "Dounutchart",
data() {
return {
chartData: {},
currentDate: "2024-08-14",
currentStdId: "1",
root: null,
chart: null
};
},
mounted() {
this.getStdProgressData();
},
methods: {
// 현재 날짜의 학생 학습률 데이터 가져오기
getStdProgressData() {
const vm = this;
axios.post('/dashboard/stdProgressData.json', {
std_id: vm.currentStdId,
current_date: vm.currentDate
})
.then(response => {
vm.chartData = response.data;
vm.createChart();
})
.catch(error => {
console.error('오늘의 학생 학습 현황 데이터를 가져오는 중 오류 발생:', error);
})
},
createChart() {
// 차트 중복 생성 방지
if (this.root) {
this.root.dispose();
}
// Initialize root
const root = am5.Root.new(this.$refs.Dounutchart);
// Apply themes
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
const chart = root.container.children.push(am5percent.PieChart.new(root, {
layout: root.verticalLayout,
innerRadius: am5.percent(50) // Adjusted innerRadius for a donut chart
}));
// Create series
const series = chart.series.push(am5percent.PieSeries.new(root, {
valueField: "value",
categoryField: "category",
alignLabels: false
}));
// Add static label
// const label = chart.plotContainer.children.push(am5.Label.new(root, {
// text: "Total",
// x: am5.p50,
// y: am5.p50,
// centerX: am5.p50,
// centerY: am5.p50,
// fill: am5.color(0x000000),
// fontSize: 20,
// fontWeight: "bold"
// }));
// 색깔 설정
series.slices.template.setAll({
fill: am5.color(0x008000), // green for completed units
strokeWidth: 0,
strokeOpacity: 0
});
// 카테고리 별 색깔 설정
series.slices.template.adapters.add("fill", (fill, target) => {
if (target.dataItem.get("category") === "완료한 단원") {
return am5.color(0xafe589); // 초록
} else if (target.dataItem.get("category") === "남은 단원") {
return am5.color(0xf7cece); // 빨강
}
return fill;
});
series.labels.template.setAll({
textType: "circular",
centerX: am5.p50,
centerY: am5.p50
});
// Set data
series.data.setAll([
{ value: this.chartData.clearUnitNum, category: "완료한 단원" },
{ value: this.chartData.totalScheduleUnitNum - this.chartData.clearUnitNum, category: "남은 단원" },
]);
// Create legend
const legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50,
marginTop: 15,
marginBottom: 15
}));
legend.data.setAll(series.dataItems);
// Play initial series animation
series.appear(1000, 100);
}
}
};
</script>
<style scoped>
/* Add necessary styles here */
</style>