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="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>