ECharts와 PHP 인터페이스를 결합하여 다중 차트 연결 통계 차트 표시를 구현하는 방법
- WBOY원래의
- 2023-12-18 10:07:08865검색
데이터 시각화 분야에서 ECharts는 널리 사용되는 프런트엔드 차트 라이브러리이며, ECharts의 강력한 데이터 시각화 기능은 다양한 업계에서 수요가 높습니다. 실제 프로젝트에서는 여러 차트를 연결하여 표시해야 하는 상황이 자주 발생합니다. 이 기사에서는 ECharts와 PHP 인터페이스를 결합하여 다중 차트 연결 통계 차트 표시를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
1. 전제 조건
이 기사를 실행하려면 다음 기술을 숙지해야 합니다.
- HTML, CSS 및 JavaScript에 대한 기본 지식
- ECharts에 대한 기본 지식; PHP.
- 2. 요구 사항 분석
우리의 요구 사항은 한 페이지에 여러 개의 상호 연관된 차트를 표시하고 이러한 차트를 서로 연결할 수 있는 것입니다.
요구 사항 분석은 다음과 같습니다.
페이지에는 메인 맵과 보조 맵이라는 두 개의 맵이 있습니다.- 페이지에 막대 차트와 선 차트가 있습니다.
- 페이지 왼쪽에는 드롭다운 메뉴가 있습니다. 이 드롭다운 메뉴에는 여러 옵션이 포함되어 있습니다. 각 옵션은 해당 데이터를 다시 로드하고 해당 차트를 업데이트합니다.
- 드롭다운 메뉴에서 옵션을 선택하면 모든 차트가 데이터 변경에 따라 변경되고 막대 차트와 선 차트도 그에 따라 업데이트됩니다.
- 3. 구현 계획
- 먼저 페이지를 HTML 파일로 레이아웃합니다. Wrap이라는 div 컨테이너를 만들고 이 div 컨테이너에 모든 차트를 배치합니다. 그 중 페이지 공간을 최대한 활용하려면 지도 컨테이너의 높이를 100%로 설정해야 합니다.
<body>
<div id="wrap">
<div id="map1" style="height: 100%; width: 60%; float:left; "></div>
<div id="chart1" style="height: 400px; width: 40%; float:left;"></div>
<div id="map2" style="height: 100%; width:60%; float:left;"></div>
<div id="chart2" style="height: 400px; width: 40%; float:left;"></div>
</div>
</body>Calling ECharts- ECharts 라이브러리 파일을 페이지에 도입해야 합니다. 해당 라이브러리 파일은 ECharts 공식 홈페이지(https://echarts.apache.org/en/download.html)에서 다운로드할 수 있습니다.
HTML 파일의 <script> 태그를 사용하여 ECharts 라이브러리 파일을 소개하고 해당 차트 인스턴스를 만듭니다. 코드 Chart1, Chart2, map1 및 map2에서 차트 인스턴스의 이름을 지정합니다. </script>
<!-- 引入ECharts的库文件 -->
<script src="echarts.common.min.js"></script>
<script>
// 创建主地图的图表实例
var map1 = echarts.init(document.getElementById('map1'));
// 创建次地图的图表实例
var map2 = echarts.init(document.getElementById('map2'));
// 创建条形图的图表实例
var chart1 = echarts.init(document.getElementById('chart1'));
// 创建折线图的图表实例
var chart2 = echarts.init(document.getElementById('chart2'));
</script>데이터 가져오기- 우리는 PHP를 사용하여 서버에서 데이터를 가져오는 인터페이스를 작성합니다. 특정 데이터 형식은 실제 필요에 따라 설계될 수 있습니다. 이 글에서는 반환되는 데이터 형식이 다음과 같다고 가정합니다.
{
"map1_data":[...],
"map2_data":[...],
"chart1_data":[...],
"chart2_data":[...],
...
}여기에서는 jQuery의 .ajax() 메서드를 사용하여 서버에 데이터를 요청하고, 요청이 성공한 후 해당 함수를 호출하여 차트를 그립니다.
function getData(option) {
$.ajax({
type: "POST",
url: "getdata.php",
data: option,
dataType: "json",
success: function(response) {
drawMap1(response.map1_data);
drawMap2(response.map2_data);
drawChart1(response.chart1_data);
drawChart2(response.chart2_data);
...
}
});
}차트 그리기- 다음으로, 수신된 데이터를 사용하여 지도, 막대 차트, 선 차트를 그리는 함수를 작성해야 합니다. 이 기사에서는 ECharts API를 사용하여 차트를 그립니다. 특정 API 사용에 대해서는 ECharts 공식 문서를 참조하세요.
function drawMap1(data) {
// 使用接收到的数据进行地图实例的数据更新
map1.setOption(option);
}
function drawMap2(data) {
// 使用接收到的数据进行地图实例的数据更新
map2.setOption(option);
}
function drawChart1(data) {
// 使用接收到的数据进行条形图实例的数据更新
chart1.setOption(option);
}
function drawChart2(data) {
// 使用接收到的数据进行折线图实例的数据更新
chart2.setOption(option);
}차트 연결- 마지막 단계에서는 차트 간 연결을 구현해야 합니다. 사용자가 드롭다운 메뉴에서 옵션을 선택하면 모든 차트가 그에 따라 변경됩니다.
ECharts API의 dispatchAction() 메서드를 사용하여 차트 간의 연결을 설정할 수 있습니다. 차트를 선택하면 해당 차트의 선택된 데이터를 다른 차트에 전달해야 합니다.
option1.on('mapSelect', function(params) {
// 获取地图选中的区域
var selectedData = params.batch[0].selected[0];
// 为条形图和折线图设置选中数据
chart1.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: selectedData.dataIndex
});
chart2.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: selectedData.dataIndex
});
// 为次地图设置选中数据
map2.dispatchAction({
type: 'mapSelect',
name: selectedData.name,
seriesIndex: 0
});
// 为请求数据添加参数
var option = {
map1_data: selectedData.name,
...
}
// 请求更新数据
getData(option);
});4. 요약
이 기사에서는 ECharts와 PHP 인터페이스를 결합하여 다중 차트 연결 통계 차트 표시를 구현하는 방법을 소개했습니다. 먼저 요구 사항을 이해한 후 페이지 레이아웃, ECharts 라이브러리 호출, 데이터 가져오기 및 차트 그리기, 차트 연결 구현의 5가지 측면에서 상세한 구현 계획과 구체적인 코드 예제를 제공했습니다. 이 기사를 연구함으로써 독자들은 ECharts 라이브러리를 더 잘 적용하여 다중 차트 연결로 표시된 데이터를 시각화할 수 있다고 믿습니다.
위 내용은 ECharts와 PHP 인터페이스를 결합하여 다중 차트 연결 통계 차트 표시를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!