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 id="chartdiv" style="width: 100%" ref="chartdiv"></div> -->
<div style="width: 100%; height: 100%" ref="chartdivWrap">
<div
ref="chartdiv"
id="chartdiv"
style="width: 100%; height: 100%; background: #ffffff"
></div>
</div>
</template>
<script>
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
export default {
props: {
chartDataName: {
type: Array,
default: [],
},
chartData: {
type: Array,
default: [],
},
},
data() {
return {
charts: {},
};
},
methods: {
createChart: function () {
console.log("createChart");
/* if (COMMON_UTIL.isEmpty(this.charts["chartdiv"]) == false) {
this.charts["chartdiv"].dispose();
} */
let chartWarp = this.$refs["chartdivWrap"];
chartWarp.innerHTML = "";
let div = document.createElement("div");
div.style.width = "100%";
div.style.height = "100%";
chartWarp.appendChild(div);
let root = am5.Root.new(div);
this.charts["chartdiv"] = root;
/* Chart code */
//amChart 로고 삭제
root._logo.dispose();
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
let chart = root.container.children.push(
am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelX: "panX",
wheelY: "zoomX",
pinchZoomX: true,
})
);
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
cursor.lineY.set("visible", false);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
let xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
xRenderer.labels.template.setAll({
centerY: am5.p50,
centerX: am5.p100,
paddingRight: 15,
oversizedBehavior: "truncate",
maxWidth: 10,
textAlign: "center",
ellipsis: "...",
});
xRenderer.grid.template.setAll({
location: 1,
});
let xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
maxDeviation: 0.3,
categoryField: "country",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {}),
})
);
let yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
maxDeviation: 0.3,
renderer: am5xy.AxisRendererY.new(root, {
strokeOpacity: 0.1,
}),
})
);
// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
let series = chart.series.push(
am5xy.ColumnSeries.new(root, {
name: "Series 1",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value",
sequencedInterpolation: true,
categoryXField: "country",
tooltip: am5.Tooltip.new(root, {
labelText: "{valueY}",
}),
})
);
series.columns.template.setAll({
cornerRadiusTL: 5,
cornerRadiusTR: 5,
strokeOpacity: 0,
});
series.columns.template.adapters.add("fill", function (fill, target) {
return chart.get("colors").getIndex(series.columns.indexOf(target));
});
series.columns.template.adapters.add("stroke", function (stroke, target) {
return chart.get("colors").getIndex(series.columns.indexOf(target));
});
// Set data
let data = [
{
country: "USA",
value: 2025,
},
{
country: "China",
value: 1882,
},
{
country: "Japan",
value: 1809,
},
{
country: "Germany",
value: 1322,
},
{
country: "UK",
value: 1122,
},
{
country: "France",
value: 1114,
},
{
country: "India",
value: 984,
},
{
country: "Spain",
value: 711,
},
{
country: "Netherlands",
value: 665,
},
{
country: "South Korea",
value: 443,
},
{
country: "Canada",
value: 441,
},
];
xAxis.data.setAll(data);
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);
},
},
watch: {
// 부모 컴포넌트에서 데이터 업데이트 시 자식 컴포넌트도 props 데이터 업데이트
// "chartData": function(newValue, oldValue){
// console.log('chartdiv watch: ', newValue, oldValue);
// // 차트 생성 함수
// this.createChart();
// }
},
mounted() {
this.createChart();
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#chartdiv {
}
</style>