ECharts 에서 selected data 를 table 에 표시하기
2024. 7. 1. 22:58
반응형
ECharts 에서 selected data 를 table 에 표시하기
ECharts 에서 선택한 데이터를 table 에 표시아는 방법을 알아봅니다.
선택의 완료 이벤트는 brushselected 에서 처리되며 index 를 기준으로 데이터를 찾아 table 를 구성하게됩니다.
large : true 인 경우 largeThreshold 값을 데이터 수보다 크게 줘야합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts Brush Selected Test</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
}
#main {
width: 800px;
height: 600px;
}
table {
margin-top: 20px;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<div id="main"></div>
<table id="selected-data-table">
<thead>
<tr>
<th>Index</th>
<th>Time (x)</th>
<th>Value (y)</th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
var option = {
dataset: {
source: (function () {
var data = [];
for (var i = 0; i < 10000; i++) {
data.push([
randomDate(new Date(2020, 0, 1), new Date(2023, 0, 1)),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100),
Math.round(Math.random() * 100)
]);
}
return data;
})()
},
xAxis: { type: 'time' },
yAxis: { type: 'value' },
series: [{
type: 'scatter',
large: true,
encode: { x: 0, y: 1 },
largeThreshold: 10001
}],
brush: {
toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
xAxisIndex: 0
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
var data = params[0].data;
return [
'Time: ' + data[0],
'Value: ' + data[1],
'A: ' + data[2],
'B: ' + data[3],
'C: ' + data[4]
].join('<br>');
}
}
};
myChart.setOption(option);
myChart.on('brushselected', function (params) {
var brushed = params.batch[0].selected[0];
var rawIndices = brushed.dataIndex;
var tableBody = document.getElementById('selected-data-table').querySelector('tbody');
tableBody.innerHTML = ''; // 테이블 초기화
rawIndices.forEach(function (index) {
var data = option.dataset.source[index];
var row = tableBody.insertRow();
var cellIndex = row.insertCell(0);
var cellX = row.insertCell(1);
var cellY = row.insertCell(2);
var cellA = row.insertCell(3);
var cellB = row.insertCell(4);
var cellC = row.insertCell(5);
cellIndex.textContent = index;
cellX.textContent = data[0].toISOString();
cellY.textContent = data[1];
cellA.textContent = data[2];
cellB.textContent = data[3];
cellC.textContent = data[4];
});
});
</script>
</body>
</html>결과
반응형
'코딩 > ECharts' 카테고리의 다른 글
| ECharts 에서 datatables 라이브러리를 이용해 DataView 가상화 처리하기 (0) | 2024.07.01 |
|---|---|
| ECharts 에 바인딩 된 dataset source 내용 DataView 에 표시하기 (0) | 2024.07.01 |
| ECharts 스크립트 테스트 해볼 수 있는 사이트 (0) | 2024.02.20 |
| ECharts Blazor에서 사용하기 (0) | 2024.02.20 |
| ECharts html sample code (0) | 2024.02.19 |
