ECharts Sankey Rose Chart: 데이터 흐름과 비율을 표시하려면 구체적인 코드 예제가 필요합니다.
빅데이터 시대가 도래하면서 데이터 분석과 시각화가 중요한 도구가 되었습니다. 강력한 시각화 라이브러리인 ECharts는 다양한 차트 유형을 제공하며 그 중 하나가 Sankey Rose 차트입니다. Sankey Rose 다이어그램은 데이터 흐름과 비율 관계를 여러 차원으로 표시하는 데 적합합니다. 이 글에서는 Sankey Rose Chart의 기본 개념과 사용법을 소개하고 구체적인 코드 예제를 제공합니다.
// 引入ECharts var echarts = require('echarts'); // 初始化图表 var myChart = echarts.init(document.getElementById('chart')); // 数据示例 var data = [ { source: 'A', target: 'B', value: 100 }, { source: 'A', target: 'C', value: 200 }, { source: 'B', target: 'C', value: 150 }, ]; // 将数据格式转换为桑基玫瑰图需要的格式 var seriesData = data.map(item => { return { name: item.source, type: 'sankey', data: [ { name: item.source }, { name: item.target }, ], links: [ { source: item.source, target: item.target, value: item.value }, ], }; }); // 配置项 var option = { tooltip: {}, series: seriesData, }; // 渲染图表 myChart.setOption(option);
위 코드에서는 먼저 ECharts 라이브러리를 소개하고 차트 인스턴스를 초기화합니다. 그런 다음 세 개의 노드와 두 개의 관계를 포함하는 간단한 데이터 예제가 정의됩니다. 다음으로 데이터를 Sankey 장미 다이어그램에 필요한 형식으로 변환합니다. 여기서 노드의 이름 속성은 노드 이름을 나타내고 링크 속성은 노드 간의 관계를 나타냅니다.
마지막으로 구성 항목을 통해 일부 스타일과 대화형 동작을 정의하고 렌더링을 위해 데이터를 차트 인스턴스에 전달했습니다. 페이지에서 차트의 위치는 div 요소의 ID로 지정할 수 있습니다.
Sankey Rose Chart를 통해 데이터 간의 관계를 직관적으로 이해하고 더 나은 의사결정을 내릴 수 있습니다.
요약:
이 글에서는 ECharts Sankey Rose Chart의 기본 개념과 사용법을 소개하고 구체적인 코드 예제를 제공합니다. Sankey Rose 다이어그램은 데이터 흐름 방향과 비율 관계를 표시하는 데 적합하며 다양한 길이의 반경과 각도를 통해 데이터의 양과 크기를 나타냅니다. ECharts 라이브러리를 사용하면 Sankey Rose Chart를 쉽게 구현하고 다양한 애플리케이션 시나리오에서 사용할 수 있습니다. 이 글이 Sankey Rose Chart를 이해하고 사용하는 데 도움이 되기를 바랍니다.
위 내용은 ECharts Sankey Rose 차트: 데이터 흐름 및 비율을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!