어렵지 않게 누적 막대그래프 만드는 코드 입니다.
amcharts 라이브러리를 임포트 해줍니다.
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
데이터 구조는 이러합니다. Arr가 아닌 Obj 구조
var data = [
{"date": "2023-10-01","A": 5,"B": 2,"C": 0,"D": 1,"F": 1,"G": 1},
{"date": "2023-10-02","A": 12,"B": 13,"C": 0,"D": 1,"F": 1,"G": 1},
{"date": "2023-10-03","A": 2,"B": 14,"C": 1,"D": 1,"F": 1,"G": 3},
{"date": "2023-10-04","A": 3,"B": 5,"C": 2,"D": 11,"F": 1,"G": 1},
{"date": "2023-10-05","A": 4,"B": 15,"C": 4,"D": 21,"F": 11,"G": 2},
{"date": "2023-10-06","A": 5,"B": 13,"C": 0,"D": 1,"F": 1,"G": 1},
{"date": "2023-10-07","A": 6,"B": 0,"C": 0,"D": 1,"F": 1,"G": 4},
{"date": "2023-10-08","A": 14,"B": 0,"C": 1,"D": 1,"F": 1,"G": 4},
{"date": "2023-10-09","A": 25,"B": 1,"C": 23,"D": 1,"F": 1,"G": 1},
{"date": "2023-10-10","A": 33,"B": 0,"C": 2,"D": 21,"F": 1,"G": 2},
{"date": "2023-10-11","A": 2,"B": 0,"C": 2,"D": 1,"F": 1,"G": 6},
{"date": "2023-10-12","A": 2,"B": 0,"C": 0,"D": 1,"F": 1,"G": 1},
{"date": "2023-10-13","A": 0,"B": 0,"C": 1,"D": 1,"F": 7,"G": 8},
{"date": "2023-10-14","A": 0,"B": 0,"C": 2,"D": 1,"F": 1,"G": 1},
]
useEffect(()=>{
if(!data) return
// Create root
const root = am5.Root.new(chartId);
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
const chart = root.container.children.push(
am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout
})
);
// Add scrollbar
chart.set("scrollbarX", am5.Scrollbar.new(root, {
orientation: "horizontal"
}));
// Create axes
var xRenderer = am5xy.AxisRendererX.new(root, {});
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "date",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {})
}));
xRenderer.grid.template.setAll({
location: 1
})
xAxis.data.setAll(data);
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
min: 0,
renderer: am5xy.AxisRendererY.new(root, {
strokeOpacity: 0.1
})
}));
// Add legend
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
}));
// Add series
function makeSeries(name, fieldName) {
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: name,
stacked: true,
xAxis: xAxis,
yAxis: yAxis,
valueYField: fieldName,
categoryXField: "date"
}));
series.columns.template.setAll({
tooltipText: "{name}, {categoryX}: {valueY}",
tooltipY: am5.percent(10)
});
series.data.setAll(data);
// Make stuff animate on load
series.appear();
series.bullets.push(function() {
return am5.Bullet.new(root, {
sprite: am5.Label.new(root, {
text: "{valueY}",
fill: root.interfaceColors.get("alternativeText"),
centerY: am5.p50,
centerX: am5.p50,
populateText: true
})
});
});
legend.data.push(series);
}
makeSeries("A 기관", "A");
makeSeries("B 기관", "B");
makeSeries("C 기관", "C");
makeSeries("D 기관", "D");
makeSeries("E 기관", "E");
makeSeries("F 기관", "F");
makeSeries("G 기관", "G");
chart.appear(1000, 100);
},[data])
레전드, 시리즈, 스크롤 이벤트들을 출력하는 코드입니다.
데이터가 먼저 세팅되고, 그래프가 그려지게 구성했습니다.
<div id={chartId} style={{width : '100%' , height : '500px'}}></div>
728x90
반응형
'Front-end > React' 카테고리의 다른 글
[React] 'react-player/lazy' 라이브러리 사용 연속 재생 가능한 비디오 플레이어 만들기 (2) | 2023.10.31 |
---|---|
[PIP 모드 키기] 리액트로 Picture In Picture 창 켜보기 라이브러리 사용 (0) | 2023.10.31 |
React PC/Mobile 접속 기기별 라우팅 react-device-detect (0) | 2023.09.20 |
[대시보드] amcharts 라이브러리 사용 리액트 Pie 차트 (0) | 2023.08.30 |
[대시보드] amcharts 라이브러리 사용 리액트 Bar 차트 (0) | 2023.08.27 |
댓글