[대시보드] amcharts 라이브러리 사용 리액트 누적 막대 그래프 만들기

어렵지 않게 누적 막대그래프 만드는 코드 입니다.

 

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>