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 class="columnChart" ref="ColumnLineChart"></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 */
.columnChart {
width: 40rem;
height: 40rem;
/* margin-left: -10rem;*/
}
</style>