ECharts 히스토그램(다차원): 데이터 그룹화 및 비교를 표시하는 방법, 구체적인 코드 예제가 필요합니다.
ECharts는 다양한 유형의 데이터 차트를 표시하는 데 사용되는 JavaScript 기반의 오픈 소스 시각화 라이브러리입니다. 히스토그램은 다양한 그룹이나 범주의 데이터 그룹화 및 비교를 표시하는 데 사용할 수 있는 일반적인 데이터 시각화 방법입니다. 이 기사에서는 ECharts의 다차원 히스토그램 기능을 사용하여 데이터 그룹화 및 비교를 표시하는 방법을 자세히 소개하고 독자의 참조를 위한 구체적인 코드 예제를 제공합니다.
1. ECharts 다차원 히스토그램 개요
다차원 히스토그램은 여러 데이터 지표를 동시에 표시할 수 있는 차트입니다. 막대 차트, 막대 차트 또는 히스토그램이라고도 합니다. 다양한 그룹이나 범주의 데이터 그룹화 및 비교를 표시하는 데 사용할 수 있으며 여러 차원이 포함된 데이터 세트를 표시하는 데 적합합니다. 예를 들어 회사의 매출을 표시할 때 다양한 제품군의 매출, 다양한 판매 지역의 매출 및 기타 차원을 다차원 컬럼 차트에 동시에 표시하여 서로 다른 데이터 간의 관계를 빠르게 비교할 수 있습니다.
ECharts의 다차원 히스토그램은 서로 다른 히스토그램 그룹과 같은 동일한 차원의 서로 다른 값 또는 서로 다른 히스토그램 그룹과 같은 서로 다른 차원의 조합 등 다양한 차원 조합을 지원합니다. 차원 조합이 결정된 후 각 히스토그램 그룹은 다양한 색상, 색상 그라데이션, 히스토그램 사이의 간격, 히스토그램 너비 등에 따라 사용자 정의하여 다양한 요구에 맞게 조정할 수 있습니다.
2. ECharts 다차원 히스토그램 사용 방법
ECharts 다차원 히스토그램을 사용하여 데이터를 표시하기 전에 먼저 데이터를 준비해야 합니다. 데이터 형식은 ECharts에서 지정한 형식을 준수해야 합니다. 공식 문서에서 특정 형식 요구 사항을 확인할 수 있습니다. 예는 다음과 같습니다.
let data = [
{product: 'A', area: 'Shanghai', sales: 800},
{product: 'B', area: 'Shanghai', sales: 1200},
{product: 'A', area: 'Beijing', sales: 1000},
{product: 'B', area: 'Beijing', sales: 1400},
];위 데이터에는 제품 라인, 판매 지역 및 판매라는 세 가지 차원의 데이터가 포함되어 있습니다.
데이터를 준비한 후 ECharts 매개변수를 구성해야 합니다. ECharts는 다차원 히스토그램을 위한 특수 매개변수 구성 방법을 제공합니다. 공식 문서에서 특정 매개변수 설명을 볼 수 있습니다. 예를 들면 다음과 같습니다.
let option = {
xAxis: {
type: 'category',
data: ['Shanghai', 'Beijing']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
name: 'Product A',
data: [800, 1000]
},
{
type: 'bar',
name: 'Product B',
data: [1200, 1400]
}
]
};위 코드에서 x축은 판매 지역 차원을 나타내고 y축은 판매 차원을 나타냅니다. 계열 배열에는 두 개의 히스토그램 그룹이 정의되어 있는데, 이는 A 제품과 B 제품의 판매 데이터입니다.
ECharts 매개변수 구성을 완료한 후 ECharts에서 제공하는 API를 통해 매개변수를 HTML 페이지의 DOM 요소에 바인딩하여 특정 히스토그램을 생성할 수 있습니다. 예는 다음과 같습니다.
let chart = echarts.init(document.getElementById('chart_container'));
chart.setOption(option);위 코드에서 'chart_container'는 생성된 히스토그램을 저장하는 데 사용되는 HTML 페이지의 DIV 요소의 ID 값입니다. echarts.init() 메소드는 ECharts 인스턴스를 초기화하는 데 사용되며, setOption() 메소드는 인스턴스의 매개변수를 설정하는 데 사용됩니다.
3. 코드 예제
다음은 ECharts 다차원 히스토그램을 사용하여 데이터 그룹화 및 비교를 표시하는 방법을 보여주는 간단한 코드 예제입니다. 코드에는 두 가지 판매 데이터 세트, 즉 다양한 제품 라인 및 판매 지역에 대한 판매 데이터가 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts多维柱状图示例</title>
</head>
<body>
<div id="chart_container" style="width: 600px; height: 400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
// 准备数据
let data = [
{product: 'A', area: 'Shanghai', sales: 800},
{product: 'B', area: 'Shanghai', sales: 1200},
{product: 'A', area: 'Beijing', sales: 1000},
{product: 'B', area: 'Beijing', sales: 1400},
];
// 配置ECharts参数
let option = {
legend: {},
tooltip: {},
dataset: {
dimensions: ['area', 'product', 'sales'],
source: data
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
rotate: 45
}
},
yAxis: {},
series: [
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'}
]
};
// 渲染ECharts图表
let chart = echarts.init(document.getElementById('chart_container'));
chart.setOption(option);
</script>
</body>
</html>위 예제 코드에서 범례 매개변수는 범례의 위치와 스타일을 구성하는 데 사용되며, 툴팁은 마우스를 올렸을 때 프롬프트 상자 스타일을 구성하는 데 사용되며, 데이터세트 매개변수는 데이터세트 형식을 구성하는 데 사용됩니다. , 차원은 데이터세트의 차원 순서를 정의하는 데 사용되며 소스는 데이터 소스를 지정하는 데 사용됩니다.
xAxis 매개변수는 x축의 스타일을 구성하는 데 사용되며, axisLabel의 간격 및 회전 속성은 x축 레이블의 텍스트 표시 모드를 제어하는 데 사용되며, yAxis는 y축의 스타일을 구성하는 데 사용됩니다. -중심선.
series는 히스토그램 그룹의 스타일을 정의하는 데 사용됩니다. 여기서 type은 차트 유형을 나타내고 seriesLayoutBy는 행 또는 열을 데이터 차원으로 사용하는 그리기 방법을 나타냅니다.
위의 코드 예제를 통해 독자는 ECharts 다차원 히스토그램의 사용법을 더 깊이 이해할 수 있으며 실제 응용 프로그램에서 데이터 그룹화 및 비교를 보다 유연하게 표시할 수 있습니다.
위 내용은 ECharts 히스토그램(다차원): 데이터 그룹화 및 비교를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
