분산형 차트를 사용하여 ECharts에서 데이터 관계를 표시하는 방법-JS 튜토리얼-php.cn

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

王林

풀어 주다： 2023-12-17 21:53:45

원래의

923명이 탐색했습니다.

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

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

ECharts는 사용자가 데이터를 표시할 수 있는 다양한 차트 유형을 제공하는 오픈 소스 데이터 시각화 라이브러리입니다. 그 중 산점도(Scatter Plot)는 일반적으로 사용되는 데이터 표시 방식으로 데이터 점의 위치를 좌표계로 표현함으로써 데이터 간의 관계를 시각적으로 표시할 수 있다. 이 기사에서는 분산형 차트를 사용하여 ECharts에서 데이터 관계를 표시하는 방법을 소개하고 특정 코드 예제를 제공합니다.

먼저 ECharts를 사용하여 분산형 차트를 그리려면 HTML 페이지에 ECharts 라이브러리 파일을 도입해야 합니다. 다음 단계를 통해 도입할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用散点图展示数据关系</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
</head>
<body>
  <div id="scatterChart" style="width: 600px; height: 400px"></div>
  <script src="scatter.js"></script>
</body>
</html>

로그인 후 복사

HTML에서 div 요소를 생성하고 JavaScript에서 사용할 ID를 할당합니다. 그런 다음 <script> 태그를 통해 ECharts 라이브러리 파일을 도입합니다. 다음으로, <script> 태그를 사용하여 분산형 차트를 그리기 위한 scatter.js라는 JavaScript 파일을 도입합니다. <script>标签引入ECharts库文件。接下来，使用<script>标签引入一个名为scatter.js的JavaScript文件，用于绘制散点图。

在scatter.js

scatter.js 파일에서 특정 코드를 작성하여 산점도를 그릴 수 있습니다. 먼저 div 요소에 대한 참조를 가져와야 합니다.

var scatterChart = echarts.init(document.getElementById('scatterChart'));

로그인 후 복사

그런 다음 표시해야 하는 데이터를 정의합니다. 간단한 2차원 분산형 차트를 예로 들면, 여러 데이터 포인트가 포함된 배열을 정의할 수 있습니다.

var data = [
  [10, 4],
  [15, 10],
  [7, 8],
  [20, 14],
  // 更多数据点...
];

로그인 후 복사

다음으로 ECharts에서 제공하는 옵션 구성 항목을 통해 분산형 차트의 스타일과 데이터를 설정할 수 있습니다. 먼저 빈 개체를 옵션의 초기 값으로 정의해야 합니다.

var option = {};

로그인 후 복사

그런 다음 좌표축, 데이터 포인트 스타일, 범례 등을 포함하여 옵션 개체에서 산점도의 관련 구성을 설정할 수 있습니다. x축과 y축을 설정할 수 있습니다. 눈금 범위와 이름은 다음과 같습니다.

option = {
  xAxis: {
    type: 'value',
    min: 0,
    max: 25,
    name: 'X轴'
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 15,
    name: 'Y轴'
  },
  series: [{
    type: 'scatter',
    data: data
  }]
};

로그인 후 복사

위 코드로 산점도가 그려졌습니다. 마지막으로 setOption 메소드를 사용하여 차트에 구성을 적용하면 분산형 차트 표시가 완료됩니다.

scatterChart.setOption(option);

로그인 후 복사

요약하면 위 코드는 분산형 차트를 그리고 ECharts에 데이터 관계를 표시하는 기능을 구현합니다. ECharts 라이브러리 파일을 도입하고, 해당 HTML 페이지를 생성하고, JavaScript 파일에 분산형 차트 스타일과 데이터를 구성하면 분산형 차트를 그릴 수 있습니다. 이 기사에 제공된 코드 예제가 독자가 분산형 차트를 사용하여 ECharts에서 데이터 관계를 표시하는 방법을 더 잘 이해하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 분산형 차트를 사용하여 ECharts에서 데이터 관계를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!