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: inherit;" 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: false,
panY: false,
wheelX: "none",
wheelY: "none"
})
);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
let yRenderer = am5xy.AxisRendererY.new(root, { minGridDistance: 30 });
yRenderer.grid.template.set("location", 1);
let yAxis = chart.yAxes.push(
am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
categoryField: "country",
renderer: yRenderer
})
);
let xAxis = chart.xAxes.push(
am5xy.ValueAxis.new(root, {
maxDeviation: 0,
min: 0,
renderer: am5xy.AxisRendererX.new(root, {
visible: true,
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,
valueXField: "value",
sequencedInterpolation: true,
categoryYField: "country"
})
);
let columnTemplate = series.columns.template;
columnTemplate.setAll({
draggable: true,
cursorOverStyle: "pointer",
tooltipText: "drag to rearrange",
cornerRadiusBR: 10,
cornerRadiusTR: 10,
strokeOpacity: 0
});
columnTemplate.adapters.add("fill", (fill, target) => {
return chart.get("colors").getIndex(series.columns.indexOf(target));
});
columnTemplate.adapters.add("stroke", (stroke, target) => {
return chart.get("colors").getIndex(series.columns.indexOf(target));
});
columnTemplate.events.on("dragstop", () => {
sortCategoryAxis();
});
// Get series item by category
function getSeriesItem(category) {
for (var i = 0; i < series.dataItems.length; i++) {
let dataItem = series.dataItems[i];
if (dataItem.get("categoryY") == category) {
return dataItem;
}
}
}
// Axis sorting
function sortCategoryAxis() {
// Sort by value
series.dataItems.sort(function(x, y) {
return y.get("graphics").y() - x.get("graphics").y();
});
let easing = am5.ease.out(am5.ease.cubic);
// Go through each axis item
am5.array.each(yAxis.dataItems, function(dataItem) {
// get corresponding series item
let seriesDataItem = getSeriesItem(dataItem.get("category"));
if (seriesDataItem) {
// get index of series data item
let index = series.dataItems.indexOf(seriesDataItem);
let column = seriesDataItem.get("graphics");
// position after sorting
let fy =
yRenderer.positionToCoordinate(yAxis.indexToPosition(index)) -
column.height() / 2;
// set index to be the same as series data item index
if (index != dataItem.get("index")) {
dataItem.set("index", index);
// current position
let x = column.x();
let y = column.y();
column.set("dy", -(fy - y));
column.set("dx", x);
column.animate({ key: "dy", to: 0, duration: 600, easing: easing });
column.animate({ key: "dx", to: 0, duration: 600, easing: easing });
} else {
column.animate({ key: "y", to: fy, duration: 600, easing: easing });
column.animate({ key: "x", to: 0, duration: 600, easing: easing });
}
}
});
// Sort axis items by index.
// This changes the order instantly, but as dx and dy is set and animated,
// they keep in the same places and then animate to true positions.
yAxis.dataItems.sort(function(x, y) {
return x.get("index") - y.get("index");
});
}
// Set data
let data = [{
country: "USA",
value: 2025
}, {
country: "China",
value: 1882
}, {
country: "Japan",
value: 1809
}, {
country: "Germany",
value: 1322
}, {
country: "UK",
value: 1122
}];
yAxis.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 {
height: 50rem;
padding-top: 2rem;
}
</style>