amcharts 로 차트를 생성하는 코드이다.
amcharts 중 버전 5 사용
amcharts 를 install 하고 import 해준다.
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
데이터 구조
let data = {
{category : '기억' , value : 1 } ,
{category : '니은' , value : 1 } ,
{category : '디귿' , value : 1 } ,
....
....
{category : '히읏' , value : 1 } ,
}
다소 복잡해보이지만 여러 커스텀 가능함
Script Code
useEffect(() => {
if(data){
// 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: "none",
wheelY: "none"
})
);
// Create axes
const yRenderer = am5xy.AxisRendererY.new(root, {
minGridDistance: 30
});
yRenderer.grid.template.set("location", 1);
const yAxis = chart.yAxes.push(
am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
categoryField: "category",
renderer: yRenderer,
})
);
// 라벨 두줄 세팅
yAxis.get("renderer").labels.template.setAll({
oversizedBehavior: "wrap",
maxWidth: 200,
textAlign : 'right'
});
const xAxis = chart.xAxes.push(
am5xy.ValueAxis.new(root, {
maxDeviation: 0,
min: 0,
renderer: am5xy.AxisRendererX.new(root, {
visible: true,
strokeOpacity: 0.1,
}),
})
);
// Create series
const series = chart.series.push(
am5xy.ColumnSeries.new(root, {
name: "Series 1",
xAxis: xAxis,
yAxis: yAxis,
valueXField: "value",
sequencedInterpolation: true,
categoryYField: "category"
})
);
const 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++) {
var 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();
});
const easing = am5.ease.out(am5.ease.cubic);
// Go through each axis item
am5.array.each(yAxis.dataItems, function(dataItem) {
// get corresponding series item
const seriesDataItem = getSeriesItem(dataItem.get("category"));
if (seriesDataItem) {
// get index of series data item
const index = series.dataItems.indexOf(seriesDataItem);
const column = seriesDataItem.get("graphics");
// position after sorting
const 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
const x = column.x();
const 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");
});
}
yAxis.data.setAll(data);
series.data.setAll(data);
// Make stuff animate on load
series.appear(1000);
chart.appear(1000, 100);
}
}, [data]);
HTML 코드
<div id={chartID} className='watermark' style={{width : '100%' , height : '300px'}}>
</div>
바 차트에서 드래그 기능이 추가되어있다.
드래그하여 순서를 변경 가능
또한 레전드의 데이터길이 가 길때 자동 줄바꿈하게 옵션 설정 해주었다.
728x90
반응형
'Front-end > React' 카테고리의 다른 글
React PC/Mobile 접속 기기별 라우팅 react-device-detect (0) | 2023.09.20 |
---|---|
[대시보드] amcharts 라이브러리 사용 리액트 Pie 차트 (0) | 2023.08.30 |
ReactQuill 리액트 글쓰기 에디터 이미지 드롭하여 삽입하기 (2) | 2023.08.14 |
react-quill 리액트 글쓰기 에디터 이미지 서버에 저장후 url 연결 하기 [base64 문제 해결 too large data] (0) | 2023.08.11 |
리액트 글쓰기 라이브러리 사용 해서 에디터 만들기 react-quill 에디터 이미지 파일 리사이즈 (0) | 2023.08.10 |
댓글