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>
<button @click="createChart">Create Chart</button>
<div class="chartdiv" id="chartdiv" ref="chartdiv" style="width: 100%; height: 700px;"></div>
</template>
<script>
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import * as am5percent from "@amcharts/amcharts5/percent";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
export default {
props: {
datalist: {
type: Array,
default: []
},
chartName: {
type: String,
}
},
data() {
return{
jsonData: [{
"y": 10,
"x": 14,
"value": 59,
"y2": -5,
"x2": -3,
"value2": 44
}, {
"y": 5,
"x": 3,
"value": 50,
"y2": -15,
"x2": -8,
"value2": 12
}, {
"y": -10,
"x": 8,
"value": 19,
"y2": -4,
"x2": 6,
"value2": 35
}, {
"y": -6,
"x": 5,
"value": 65,
"y2": -5,
"x2": -6,
"value2": 168
}, {
"y": 15,
"x": -4,
"value": 92,
"y2": -10,
"x2": -8,
"value2": 102
}, {
"y": 13,
"x": 1,
"value": 8,
"y2": -2,
"x2": 0,
"value2": 41
}, {
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": -3,
"value2": 16
}],
}
},
components: {
},
methods: {
// 버블차트 생성
initializeChartArea:function(){
let chartWarp = this.$refs["chartdiv"]; // 차트 상위 div ref 매칭
chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)
let div = document.createElement("div"); // 차트를 담을 빈 div 생성 (차트 하위 div)
div.style.width = "100%"; // 차트를 담을 div의 넓이
div.style.height = "100%"; // 차트를 담을 div의 높이
chartWarp.appendChild(div); // 차트 상위 div 안에 차트 하위 div를 추가
let chartArea = am5.Root.new(chartWarp.firstChild);
chartArea.setThemes([am5themes_Animated.new(root)]);
return chartArea
},
createChart : function() {
let vm = this;
let data = vm.jsonData;
let root = vm.initializeChartArea(); // 차트 초기화
let chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelY: "zoomXY",
pinchZoomX:true,
pinchZoomY:true
}));
chart.get("colors").set("step", 2);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
let xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }),
tooltip: am5.Tooltip.new(root, {})
}));
let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {}),
tooltip: am5.Tooltip.new(root, {})
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
let series0 = chart.series.push(am5xy.LineSeries.new(root, {
calculateAggregates: true,
xAxis: xAxis,
yAxis: yAxis,
valueYField: "y",
valueXField: "x",
valueField: "value",
tooltip: am5.Tooltip.new(root, {
labelText: "x: {valueX}, y: {valueY}, value: {value}"
})
}));
// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
let circleTemplate = am5.Template.new({});
series0.bullets.push(function() {
let graphics = am5.Circle.new(root, {
fill: series0.get("fill"),
}, circleTemplate);
return am5.Bullet.new(root, {
sprite: graphics
});
});
// Add heat rule
// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
series0.set("heatRules", [{
target: circleTemplate,
min: 3,
max: 35,
dataField: "value",
key: "radius"
}]);
// Create second series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
// let series1 = chart.series.push(am5xy.LineSeries.new(root, {
// calculateAggregates: true,
// xAxis: xAxis,
// yAxis: yAxis,
// valueYField: "y2",
// valueXField: "x2",
// valueField: "value",
// tooltip: am5.Tooltip.new(root, {
// labelText: "x: {valueX}, y: {valueY}, value: {value}"
// })
// }));
// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
// let starTemplate = am5.Template.new({});
// series1.bullets.push(function() {
// let graphics = am5.Star.new(root, {
// fill: series1.get("fill"),
// spikes: 8,
// innerRadius: am5.percent(70),
// }, starTemplate);
// return am5.Bullet.new(root, {
// sprite: graphics
// });
// });
// // Add heat rule
// // https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
// series1.set("heatRules", [{
// target: starTemplate,
// min: 3,
// max: 50,
// dataField: "value",
// key: "radius"
// }]);
series0.strokes.template.set("strokeOpacity", 0);
// series1.strokes.template.set("strokeOpacity", 0);
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
chart.set("cursor", am5xy.XYCursor.new(root, {
xAxis: xAxis,
yAxis: yAxis,
snapToSeries: [series0]
}));
// Add scrollbars
// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
chart.set("scrollbarX", am5.Scrollbar.new(root, {
orientation: "horizontal"
}));
chart.set("scrollbarY", am5.Scrollbar.new(root, {
orientation: "vertical"
}));
series0.data.setAll(data);
// series1.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series0.appear(1000);
// series1.appear(1000);
chart.appear(1000, 100);
root._logo.dispose();
},
},
watch:{
datalist: {
handler: function (newVal, oldVal) {
this.jsonData = newVal;
this.createChart(this.jsonData);
},
deep: true
},
},
mounted() {
// this.jsonData = this.datalist;
},
};
</script>
<style scoped>
#chartdiv {
width: 100%;
height: 500px;
}
button{
margin: 10px;
background-color: antiquewhite;
border-radius: 10px;
}
</style>