ECharts 에서 datatables 라이브러리를 이용해 DataView 가상화 처리하기
2024. 7. 1. 22:09
ECharts 에서 datatables 라이브러리를 이용해 DataView 가상화 처리하기
이전시간에 DataView 에서 차트의 데이터를 표시하는 방법에 대해서 알아봤습니다.
2024.07.01 - [코딩/ECharts] - ECharts 에 바인딩 된 dataset source 내용 DataView 에 표시하기
ECharts 에 바인딩 된 dataset source 내용 DataView 에 표시하기
ECharts 에 바인딩 된 Dataset Source 내용 DataView 에 표시하기 ECharts 에는 DataView 기능이 있어 화면에 표시된 포인터 들의 정보를 확인할 수 있습니다toolbox.feature.dataView 를 show:true 해주면 toolbox 에 view
keistory.tistory.com
DataView 항목이 많은 경우 가상화 처리가 필요합니다.
datatables 라이브러리를 사용하면 가상화 처리 및 sorting, search 기능까지 들어가 있습니다.
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<style>
#main {
height: 100%;
}
#data-view-container {
width: 100%;
overflow-y: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body style="height: 100%; margin: 0">
<div id="main"></div>
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
// 1만 개의 데이터를 생성
var data = [['Time', 'Y', 'A', 'B', 'C', 'D']];
var startTime = new Date(2020, 0, 1).getTime();
for (var i = 0; i < 10000; i++) {
var time = new Date(startTime + i * 1000 * 60 * 60 * 24); // 하루 단위로 증가
data.push([
time.toISOString().split('T')[0],
(Math.random() * 100).toFixed(2),
(Math.random() * 100).toFixed(2),
(Math.random() * 100).toFixed(2),
(Math.random() * 100).toFixed(2),
(Math.random() * 100).toFixed(2)
]);
}
option = {
title: {
text: 'Dataset Test'
},
tooltip: {},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: true,
optionToContent: function(opt) {
var source = opt.dataset[0].source;
var columns = source[0].map(function (col) {
return { title: col };
});
var rows = source.slice(1);
var table = '<div id="data-view-container"><table id="data-table" class="display"></table></div>';
setTimeout(function() {
$('#data-table').DataTable({
data: rows,
columns: columns,
destroy: true,
paging: true,
searching: true,
ordering: true,
pageLength: 20
});
}, 0);
return table;
}
},
dataZoom: {
yAxisIndex: 'none'
}
}
},
dataset: {
source: data
},
xAxis: { type: 'category' },
yAxis: { type: 'value' },
dataZoom: [{
type: 'slider',
start: 0,
end: 100
}],
series: [
{ type: 'scatter', encode: { x: 'Time', y: 'Y' } }
]
};
myChart.setOption(option);
</script>
</body>
</html>Chart
DataView
그리드에 페이징 처리가 되어있고 컬럼 정렬기능이 있습니다. 또한 좌측상단에 검색 기능도 있습니다.
반응형
'코딩 > ECharts' 카테고리의 다른 글
| ECharts 에서 Spec 값을 사각형으로 각 포인트 별로 표시하기 (0) | 2024.09.29 |
|---|---|
| ECharts 에서 selected data 를 table 에 표시하기 (0) | 2024.07.01 |
| ECharts 에 바인딩 된 dataset source 내용 DataView 에 표시하기 (0) | 2024.07.01 |
| ECharts 스크립트 테스트 해볼 수 있는 사이트 (0) | 2024.02.20 |
| ECharts Blazor에서 사용하기 (0) | 2024.02.20 |
