>  기사  >  백엔드 개발  >  ECharts와 PHP 인터페이스를 결합하여 다중 차트 연결 통계 차트 표시를 구현하는 방법

ECharts와 PHP 인터페이스를 결합하여 다중 차트 연결 통계 차트 표시를 구현하는 방법

WBOY
WBOY원래의
2023-12-18 10:07:08865검색

ECharts와 PHP 인터페이스를 결합하여 다중 차트 연결 통계 차트 표시를 구현하는 방법

데이터 시각화 분야에서 ECharts는 널리 사용되는 프런트엔드 차트 라이브러리이며, ECharts의 강력한 데이터 시각화 기능은 다양한 업계에서 수요가 높습니다. 실제 프로젝트에서는 여러 차트를 연결하여 표시해야 하는 상황이 자주 발생합니다. 이 기사에서는 ECharts와 PHP 인터페이스를 결합하여 다중 차트 연결 통계 차트 표시를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 전제 조건

이 기사를 실행하려면 다음 기술을 숙지해야 합니다.

  1. HTML, CSS 및 JavaScript에 대한 기본 지식
  2. ECharts에 대한 기본 지식; PHP.
  3. 2. 요구 사항 분석

우리의 요구 사항은 한 페이지에 여러 개의 상호 연관된 차트를 표시하고 이러한 차트를 서로 연결할 수 있는 것입니다.

요구 사항 분석은 다음과 같습니다.

페이지에는 메인 맵과 보조 맵이라는 두 개의 맵이 있습니다.
  1. 페이지에 막대 차트와 선 차트가 있습니다.
  2. 페이지 왼쪽에는 드롭다운 메뉴가 있습니다. 이 드롭다운 메뉴에는 여러 옵션이 포함되어 있습니다. 각 옵션은 해당 데이터를 다시 로드하고 해당 차트를 업데이트합니다.
  3. 드롭다운 메뉴에서 옵션을 선택하면 모든 차트가 데이터 변경에 따라 변경되고 막대 차트와 선 차트도 그에 따라 업데이트됩니다.
  4. 3. 구현 계획

페이지 레이아웃
  1. 먼저 페이지를 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
  1. 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>

데이터 가져오기
  1. 우리는 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);
            ...
        }
    });
}

차트 그리기
  1. 다음으로, 수신된 데이터를 사용하여 지도, 막대 차트, 선 차트를 그리는 함수를 작성해야 합니다. 이 기사에서는 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);
}

차트 연결
  1. 마지막 단계에서는 차트 간 연결을 구현해야 합니다. 사용자가 드롭다운 메뉴에서 옵션을 선택하면 모든 차트가 그에 따라 변경됩니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.