분산형 매트릭스 차트를 사용하여 ECharts에서 데이터 관계를 표시하는 방법

분산형 매트릭스 차트를 사용하여 ECharts에서 데이터 관계를 표시하려면 특정 코드 예제가 필요합니다.

ECharts(Enterprise Charts)는 Baidu에서 출시한 HTML5 Canvas 기반의 오픈 소스 데이터 시각화 라이브러리로, 다양한 차트 유형과 대화형 기능. 그 중 산점도 행렬(Scatter Matrix Plot)은 여러 변수 간의 관계를 시각적으로 표시할 수 있는 데이터 시각화 방법으로 흔히 사용되는 방법이다. 이 기사에서는 ECharts에서 분산형 매트릭스 차트를 사용하여 데이터 관계를 표시하고 해당 코드 예제를 제공하는 방법을 소개합니다.

1. 데이터 준비
먼저 표시할 데이터를 준비해야 합니다. 세 개의 변수 X, Y, Z를 포함하는 간단한 데이터 세트가 있고 각 변수는 특정 범위 내의 값을 취한다고 가정합니다. 아래와 같이 배열을 사용하여 이 데이터를 저장할 수 있습니다.

var data = [
  [1, 2, 3],
  [2, 3, 4],
  [3, 4, 5],
  // 更多数据...
];

이 예에서 각 배열은 데이터 포인트를 나타내며 배열의 요소는 차례로 변수 X, Y 및 Z의 값에 해당합니다. .

2. 분산형 매트릭스 차트 만들기
다음으로 ECharts를 사용하여 분산형 매트릭스 차트를 만들 수 있습니다. 먼저 아래와 같이 ECharts의 리소스 파일을 가져와야 합니다.

<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>

그런 다음 분산형 매트릭스 차트를 수용할 <div> 요소를 만들고 해당 스타일과 크기를 설정합니다. <code><div>元素，用于容纳散点矩阵图，并设置相应的样式和尺寸，如下所示：<pre class='brush:html;toolbar:false;'>&lt;div id=&quot;scatterMatrix&quot; style=&quot;width: 800px; height: 600px;&quot;&gt;&lt;/div&gt;</pre><p>接着，使用JavaScript代码来初始化ECharts，并配置散点矩阵图的参数，如下所示：</p><pre class='brush:javascript;toolbar:false;'>var scatterMatrix = echarts.init(document.getElementById('scatterMatrix')); var option = { tooltip: {}, xAxis: {}, yAxis: {}, series: [{ type: 'scatter', data: data, symbolSize: 10, }] }; scatterMatrix.setOption(option);</pre><p>在这个示例中，我们使用了ECharts的<code>scatter系列类型来创建散点图，通过设置data属性来指定要展示的数据。同时，通过设置symbolSize属性来调整散点的大小。

三、自定义散点矩阵图
除了基本的散点矩阵图，ECharts还提供了丰富的配置项，可以自定义散点的样式、颜色等。例如，我们可以通过设置color

var option = {
  // ...
  series: [{
    type: 'scatter',
    data: data,
    symbolSize: 10,
    itemStyle: {
      color: function(params) {
        var value = params.data[2];
        if (value >= 0 && value < 3) {
          return 'red';
        } else if (value >= 3 && value < 6) {
          return 'blue';
        } else {
          return 'green';
        }
      }
    }
  }]
};

다음으로 JavaScript 코드를 사용하여 ECharts를 초기화하고 분산형 매트릭스 차트의 매개변수를 다음과 같이 구성합니다.

rrreee

이 예에서는 ECharts의 scatter 시리즈를 사용합니다. 분산형 차트를 생성하려면 data 속성을 ​​설정하여 표시할 데이터를 지정하세요. 동시에 symbolSize 속성을 ​​설정하여 분산점의 크기를 조정합니다.

3. 맞춤형 분산형 매트릭스 차트

기본 분산형 매트릭스 차트 외에도 ECharts는 분산형 포인트 스타일, 색상 등을 맞춤 설정할 수 있는 다양한 구성 항목도 제공합니다. 예를 들어 color 속성을 ​​설정하여 다양한 데이터 포인트에 대해 서로 다른 색상을 지정할 수 있습니다. 🎜rrreee🎜 이 예에서는 변수 Z의 값을 기반으로 데이터 포인트의 색상을 설정합니다. [0,3) 범위의 값을 갖는 데이터는 빨간색으로 설정되고, [3,6) 범위의 값을 갖는 데이터는 파란색으로 설정되고, 기타 데이터는 녹색으로 설정됩니다. 🎜🎜4. 요약🎜이 글에서는 분산형 매트릭스 차트를 사용하여 ECharts에서 데이터 관계를 표시하는 방법을 소개하고 해당 코드 예제를 제공합니다. 기본 분산형 매트릭스 차트 외에도 ECharts는 다양한 구성 항목을 제공하며 다양한 요구 사항에 맞게 분산점의 스타일, 색상 등을 사용자 정의할 수 있습니다. ECharts를 사용하면 다양한 유형의 데이터 시각화 차트를 빠르고 유연하게 생성하여 데이터를 더 잘 이해하고 분석할 수 있습니다. 🎜