Sankey 다이어그램을 사용하여 ECharts에 데이터 흐름을 표시하는 방법

Sankey 다이어그램을 사용하여 ECharts에서 데이터 흐름을 표시하는 방법

소개:
데이터 시각화는 차트 및 기타 방법을 통해 복잡한 데이터를 시각적으로 표시할 수 있는 데이터 분석의 중요한 부분입니다. ECharts는 다양한 차트 유형을 지원하는 강력한 데이터 시각화 라이브러리이며, 그중 Sankey Diagram은 데이터의 흐름 관계를 매우 직관적으로 표시할 수 있습니다. 이 기사에서는 Sankey 다이어그램을 사용하여 ECharts에 데이터 흐름을 표시하고 특정 코드 예제를 제공하는 방법을 소개합니다.

1. ECharts 라이브러리 소개
   먼저 ECharts 라이브러리를 소개해야 합니다. CDN을 통해 가져오거나 ECharts 라이브러리를 로컬로 다운로드하여 가져올 수 있습니다. 다음 예에서는 CDN 방법을 예로 사용합니다.

   <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>

2. 컨테이너 만들기
   Sankey 다이어그램을 표시하기 위한 div 컨테이너 만들기:

   <div id="sankeyChart" style="width: 800px; height: 600px;"></div>

3. 데이터 준비
   표시할 데이터 준비, 데이터 형식은 다음과 같습니다. ECharts Sankey Base 지도 요구 사항을 준수합니다. 다음은 샘플 데이터입니다.

   var data = {
    nodes: [
        {name: '节点1'},
        {name: '节点2'},
        {name: '节点3'},
        {name: '节点4'}
    ],
    links: [
        {source: '节点1', target: '节点2', value: 100},
        {source: '节点1', target: '节点3', value: 200},
        {source: '节点2', target: '节点3', value: 150},
        {source: '节点3', target: '节点4', value: 120}
    ]
   };

   노드는 데이터의 소스 또는 대상을 나타내고, 링크는 노드 간의 연결 관계와 데이터의 흐름을 나타냅니다. 각 노드에는 이름 속성이 포함되어야 하고, 링크에는 소스 및 대상 속성이 포함되어야 하며, 값은 데이터 트래픽 크기를 나타냅니다.

4. 차트 초기화
   ECharts 라이브러리 메소드를 사용하여 Sankey 차트를 초기화합니다.

   var chart = echarts.init(document.getElementById('sankeyChart'));
   
   // 设置图表配置项
   var option = {
    series: [{
        type: 'sankey',
        data: data.nodes,
        links: data.links
    }]
   };
   
   // 渲染图表
   chart.setOption(option);

5. 사용자 정의 구성
   필요에 따라 차트의 스타일과 구성을 사용자 정의할 수 있습니다. 다음은 일반적으로 사용되는 구성 항목입니다.
6. tooltip: 노드나 연결선 위에 마우스를 올렸을 때 나타나는 프롬프트 상자 구성입니다.
7. color: 노드와 연결선의 색상 구성입니다.
8. 라벨: 노드 이름 및 연결선 데이터 표시 구성.
9. 레이아웃: 차트 레이아웃 구성, 노드 위치를 조정하여 차트의 표시 모드를 변경할 수 있습니다.

10. 데이터 업데이트
    동적으로 데이터를 업데이트해야 하는 경우 다음 방법을 통해 업데이트할 수 있습니다.

    // 更新数据
    data.nodes.push({name: '节点5'});
    data.links.push({source: '节点4', target: '节点5', value: 80});
    
    // 更新图表配置
    option.series[0].data = data.nodes;
    option.series[0].links = data.links;
    
    // 重新渲染图表
    chart.setOption(option);

요약:
이 글에서는 Sankey 다이어그램을 사용하여 ECharts에 데이터 흐름을 표시하고 ECharts 라이브러리를 도입하여 컨테이너에 데이터를 준비하고 차트를 초기화하여 데이터의 흐름 관계를 시각적으로 표시할 수 있습니다. 동시에 사용자 정의 구성 및 데이터 업데이트 방법에 대해서도 배웠습니다. 독자들이 데이터 시각화 분석을 위해 ECharts를 더 잘 사용하는 데 도움이 되기를 바랍니다.

위 내용은 Sankey 다이어그램을 사용하여 ECharts에 데이터 흐름을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!