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
<template>
<div ref="ColumnLineChart" style="width: 500px; height: 500px;"></div>
</template>
<script>
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
import axios from "axios";
export default {
name: "ColumnLineChart",
data() {
return {
chartData: [],
currentStdId: "1"
};
},
mounted() {
this.getMtrScoreData();
},
methods: {
// 학생의 문제 지표 점수 데이터 가져오기
getMtrScoreData() {
const vm = this;
axios.post('/dashboard/mtrScoreData.json', {
std_id: vm.currentStdId
})
.then(response => {
if (response.data) {
// 데이터를 날짜순으로 정렬
vm.chartData = response.data.sort(
(a, b) => new Date(a.learnedDate) - new Date(b.learnedDate)
);
vm.createChart();
} else {
console.error("mtrScoreList가 응답 데이터에 없습니다.");
}
})
.catch(error => {
console.error('문제 지표 점수 데이터를 가져오는 중 오류 발생:', error);
});
},
createChart() {
// Initialize root
const root = am5.Root.new(this.$refs.ColumnLineChart);
// Apply themes
root.setThemes([
am5themes_Animated.new(root),
]);
// Create chart
const chart = root.container.children.push(
am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
paddingLeft: 0,
layout: root.verticalLayout
})
);
// Create axes
const xRenderer = am5xy.AxisRendererX.new(root, {
minorGridEnabled: true,
minGridDistance: 60
});
const xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "learnedDate",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {})
})
);
xRenderer.grid.template.setAll({
location: 1
});
xAxis.data.setAll(this.chartData);
let yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
min: 0,
extraMax: 0.1,
renderer: am5xy.AxisRendererY.new(root, {
strokeOpacity: 0.1
})
})
);
// 이해 점수 막대 그래프
let series1 = chart.series.push(
am5xy.ColumnSeries.new(root, {
name: "이해 점수",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "totalMtr01Score",
categoryXField: "learnedDate",
tooltip: am5.Tooltip.new(root, {
pointerOrientation: "horizontal",
labelText: "{name} in {categoryX}: {valueY}"
})
})
);
// 파스텔 블루
series1.columns.template.setAll({
fill: am5.color(0x87CEEB),
stroke: am5.color(0x87CEEB),
tooltipY: am5.percent(10),
});
series1.data.setAll(this.chartData);
// 표현 점수 막대 그래프
let series2 = chart.series.push(
am5xy.ColumnSeries.new(root, {
name: "표현 점수",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "totalMtr02Score",
categoryXField: "learnedDate",
tooltip: am5.Tooltip.new(root, {
pointerOrientation: "horizontal",
labelText: "{name} in {categoryX}: {valueY}"
})
})
);
// 파스텔 핑크
series2.columns.template.setAll({
fill: am5.color(0xFFB6C1),
stroke: am5.color(0xFFB6C1),
tooltipY: am5.percent(10),
});
series2.data.setAll(this.chartData);
// 이해 점수 변화 꺾은선 그래프
const lineSeries1 = chart.series.push(
am5xy.LineSeries.new(root, {
name: "이해 점수 변화",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "totalMtr01Score",
categoryXField: "learnedDate",
stroke: am5.color(0xADD8E6), // 라이트 블루로 설정
tooltip: am5.Tooltip.new(root, {
pointerOrientation: "horizontal",
labelText: "{name} on {categoryX}: {valueY}"
})
})
);
lineSeries1.strokes.template.setAll({
strokeWidth: 3,
stroke: am5.color(0xADD8E6), // 다시 명시적 설정
});
lineSeries1.bullets.push(function () {
return am5.Bullet.new(root, {
sprite: am5.Circle.new(root, {
radius: 5,
fill: am5.color(0xADD8E6), // 라이트 블루로 설정
strokeWidth: 3,
stroke: am5.color(0xADD8E6)
})
});
});
lineSeries1.data.setAll(this.chartData);
// 표현 점수 변화 꺾은선 그래프
const lineSeries2 = chart.series.push(
am5xy.LineSeries.new(root, {
name: "표현 점수 변화",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "totalMtr02Score",
categoryXField: "learnedDate",
stroke: am5.color(0xFF69B4), // 핫 핑크로 설정
tooltip: am5.Tooltip.new(root, {
pointerOrientation: "horizontal",
labelText: "{name} on {categoryX}: {valueY}"
})
})
);
lineSeries2.strokes.template.setAll({
strokeWidth: 3,
stroke: am5.color(0xFF69B4), // 다시 명시적 설정
});
lineSeries2.bullets.push(function () {
return am5.Bullet.new(root, {
sprite: am5.Circle.new(root, {
radius: 5,
fill: am5.color(0xFF69B4), // 핫 핑크로 설정
strokeWidth: 3,
stroke: am5.color(0xFF69B4)
})
});
});
lineSeries2.data.setAll(this.chartData);
chart.set("cursor", am5xy.XYCursor.new(root, {}));
let legend = chart.children.push(
am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
})
);
legend.data.setAll(chart.series.values);
chart.appear(1000, 100);
series1.appear();
series2.appear();
lineSeries1.appear();
lineSeries2.appear();
},
},
};
</script>
<style scoped>
/* Add necessary styles here */
</style>