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="StackedBarChart" style="width: 1000px; 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: "StackedBarChart",
data() {
return {
chartData: [],
};
},
mounted() {
this.getProgressRate();
},
methods: {
getProgressRate() {
const vm = this;
axios({
url: "dashboard/progressRate.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
stdId: "1",
},
})
.then(function (res) {
// console.log("Progress Rate - response : ", res.data);
vm.chartData = res.data;
// console.log(vm.chartData);
vm.createChart();
})
.catch(function (error) {
console.log("Progress Rate - error : ", error);
});
},
createChart() {
// Initialize root
const root = am5.Root.new(this.$refs.StackedBarChart);
// Apply themes
const myTheme = am5.Theme.new(root);
myTheme.rule("Grid", ["base"]).setAll({
strokeOpacity: 0.1,
});
root.setThemes([am5themes_Animated.new(root), myTheme]);
// Create chart
const chart = root.container.children.push(
am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panY",
wheelY: "zoomY",
paddingLeft: 0,
layout: root.verticalLayout,
})
);
// Define data
// const data = [
// {
// year: "2021",
// europe: 2.5,
// namerica: 2.5,
// asia: 2.1,
// lamerica: 1,
// meast: 0.8,
// africa: 0.4,
// },
// ];
// Create Y Axis
const yRenderer = am5xy.AxisRendererY.new(root, {});
const yAxis = chart.yAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "bookNm",
renderer: yRenderer,
tooltip: am5.Tooltip.new(root, {}),
})
);
yRenderer.grid.template.setAll({
location: 1,
});
yAxis.data.setAll(this.chartData);
// Create X Axis
const xAxis = chart.xAxes.push(
am5xy.ValueAxis.new(root, {
min: 0,
maxPrecision: 0,
renderer: am5xy.AxisRendererX.new(root, {
minGridDistance: 40,
strokeOpacity: 0.1,
}),
})
);
// Create legend
// const legend = chart.children.push(
// am5.Legend.new(root, {
// centerX: am5.p50,
// x: am5.p50,
// })
// );
// Function to create series
// const createSeries = (name, fieldName) => {
// const series = chart.series.push(
// am5xy.ColumnSeries.new(root, {
// name,
// stacked: true,
// xAxis,
// yAxis,
// baseAxis: yAxis,
// valueXField: fieldName,
// categoryYField: "year",
// })
// );
// series.columns.template.setAll({
// // tooltipText: "{name}, {categoryY}: {valueX}",
// tooltipY: am5.percent(90),
// });
// series.data.setAll(this.chartData);
// series.appear();
// series.bullets.push(() =>
// am5.Bullet.new(root, {
// sprite: am5.Label.new(root, {
// text: "{valueX}",
// fill: root.interfaceColors.get("alternativeText"),
// centerY: am5.p50,
// centerX: am5.p50,
// populateText: true,
// }),
// })
// );
// legend.data.push(series);
// };
// Create series
// createSeries("Europe", "europe");
// createSeries("North America", "namerica");
// createSeries("Asia", "asia");
// createSeries("Latin America", "lamerica");
// createSeries("Middle East", "meast");
// createSeries("Africa", "africa");
const series = chart.series.push(
am5xy.ColumnSeries.new(root, {
name: "progressRate",
xAxis: xAxis,
yAxis: yAxis,
baseAxis: yAxis,
valueXField: "progressRate",
categoryYField: "bookNm",
// tooltipText: "{categoryY}: {valueX}",
})
);
series.columns.template.setAll({
tooltipY: am5.percent(90),
});
series.data.setAll(this.chartData);
series.bullets.push(() =>
am5.Bullet.new(root, {
sprite: am5.Label.new(root, {
text: "{valueX}",
fill: root.interfaceColors.get("alternativeText"),
centerY: am5.p50,
centerX: am5.p50,
populateText: true,
}),
})
);
// Chart animation
chart.appear(1000, 100);
},
},
};
</script>
<style scoped>
/* Add necessary styles here */
</style>