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

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

WBOY

풀어 주다： 2023-12-17 22:30:32

원래의

1078명이 탐색했습니다.

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

분산형 차트를 사용하여 Highcharts에 데이터를 표시하는 방법

머리말
Highcharts는 풍부한 차트 유형과 강력한 사용자 정의 기능을 제공하는 오픈 소스 JavaScript 차트 라이브러리입니다. 그 중 산점도(Scatter Plot)는 두 변수 사이의 관계와 변수의 분포를 보여줄 수 있는 데이터 시각화 방법으로 흔히 사용되는 방법이다. 이 기사에서는 분산형 차트를 사용하여 Highcharts에 데이터를 표시하는 방법을 소개하고 특정 코드 예제를 제공합니다.

1단계: Highcharts 라이브러리 파일 가져오기
먼저, Highcharts 라이브러리 파일을 HTML 파일에 도입해야 합니다. 이러한 파일은 CDN을 사용하여 가져올 수 있으며 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/highcharts@8.2.2/highcharts.js"></script>
</head>
<body>
  <div id="container"></div>
</body>
</html>

로그인 후 복사

2단계: 데이터 준비
산점도를 사용하기 전에 데이터 세트를 준비해야 합니다. 데이터는 2차원 배열일 수 있으며, 각 요소에는 각각 가로 축과 세로 축의 좌표를 나타내는 두 개의 값이 포함됩니다. 샘플 데이터는 다음과 같습니다.

var data = [
  [1, 5],
  [2, 10],
  [3, 15],
  [4, 20],
  [5, 25]
];

로그인 후 복사

3단계: 분산형 차트 만들기
다음으로 다음을 사용합니다. 분산형 차트를 생성하는 Highcharts 라이브러리의 API입니다. 차트의 매개변수를 지정하려면 구성 개체를 전달해야 합니다. 샘플 코드는 다음과 같습니다.

Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  title: {
    text: '散点图'
  },
  xAxis: {
    title: {
      text: '横轴标题'
    }
  },
  yAxis: {
    title: {
      text: '纵轴标题'
    }
  },
  series: [{
    name: '散点数据',
    data: data
  }]
});

로그인 후 복사

위 코드에서는 차트 유형을 분산형(분산형 차트)으로 지정하고 제목, 가로 축 및 세로축 제목. 데이터 배열을 전달하여 데이터를 산점도에 표시합니다.

4단계: 기타 옵션 구성
Highcharts는 차트의 스타일과 상호 작용을 추가로 사용자 정의하는 데 사용할 수 있는 다양한 옵션과 구성을 제공합니다. 다음은 일반적으로 사용되는 몇 가지 옵션입니다.

색상: 계열 개체의 색상 속성을 설정하여 분산점의 색상을 지정할 수 있습니다.
크기: 시리즈 개체의 마커 속성을 설정하여 분산점의 크기를 지정할 수 있습니다.
Label: 계열 개체의 dataLabels 속성을 설정하여 분산점 레이블을 추가할 수 있습니다.

Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  title: {
    text: '散点图'
  },
  xAxis: {
    title: {
      text: '横轴标题'
    }
  },
  yAxis: {
    title: {
      text: '纵轴标题'
    }
  },
  series: [{
    name: '散点数据',
    data: data,
    color: 'blue',
    marker: {
      symbol: 'circle',
      radius: 5
    },
    dataLabels: {
      enabled: true,
      format: '{point.y}',
      style: {
        color: 'black'
      }
    }
  }]
});

로그인 후 복사

위 코드는 분산점의 색상을 파란색으로, 크기를 반경 5의 원으로 설정하고 분산점에 데이터 레이블을 추가합니다.

결론
이 글에서는 산점도를 사용하여 하이차트에 데이터를 표시하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. Highcharts 라이브러리 파일 도입, 데이터 준비, 산점도 생성 및 기타 옵션 구성을 통해 데이터를 유연하게 사용자 정의하고 표시할 수 있습니다. Highcharts를 사용하여 산점도를 그릴 때 이 기사가 도움이 되기를 바랍니다.

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