> 백엔드 개발 > Golang > ECharts 및 golang 실용 가이드: 다양한 유형의 통계 차트 만들기

ECharts 및 golang 실용 가이드: 다양한 유형의 통계 차트 만들기

WBOY
풀어 주다: 2023-12-17 22:30:19
원래의
995명이 탐색했습니다.

ECharts和golang实践指南: 制作各种类型的统计图表

ECharts 및 golang 실습 가이드: 다양한 유형의 통계 차트 만들기

디지털 시대가 도래하면서 데이터의 가치가 더욱 중요해졌습니다. 그러나 데이터의 가치는 분석과 활용에만 존재합니다. 데이터를 더 잘 분석하기 위해 차트는 필수 도구 중 하나입니다. 이번 글에서는 유명한 도구인 ECharts와 golang을 사용하여 다양한 유형의 통계 차트를 만드는 방법을 소개합니다.

준비

먼저 ECharts와 golang 환경을 준비해야 합니다.

ECharts는 우수한 상호작용성과 동적 효과를 갖춘 JavaScript 기반 오픈 소스 데이터 시각화 라이브러리로, 다양한 차트 유형을 지원합니다. 다음 두 가지 방법으로 ECharts를 설치할 수 있습니다.

  1. echarts.js 파일을 직접 다운로드하여 HTML로 도입합니다.
  2. npm을 사용하여 설치합니다.

여기에서는 다운로드 후 HTML 파일로 첫 번째 방법을 선택합니다. :

<script src="/path/echarts.min.js"></script>
로그인 후 복사

golang은 동시성과 효율성을 강조하는 정적인 유형의 컴파일 언어이며 백엔드 개발에 널리 사용됩니다. 공식 웹사이트에서 해당 설치 패키지를 다운로드하여 설치할 수 있는 golang 환경을 설치해야 합니다.

막대 차트 만들기

막대 차트는 데이터의 차이를 보여주는 일반적인 차트 유형입니다. 다음은 ECharts와 golang을 사용하여 히스토그램을 구현하는 방법을 설명합니다.

먼저 필수 데이터를 준비해야 합니다. 예를 들어 golang에서는

data := []int{120, 200, 150, 80, 70, 110, 130}
로그인 후 복사

그런 다음 ECharts의 인스턴스를 정의하고 차트의 기본 속성을 설정해야 합니다. 예:

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

var option = {
  title: {
    text: '柱状图'
  },
  tooltip: {},
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
  },
  yAxis: {},
  series: [{
    name: '数据',
    type: 'bar',
    data: data
  }]
};

chart.setOption(option);
로그인 후 복사

코드에서는 ECharts 인스턴스를 정의하고 차트의 ID를 지정한 다음 제목, X/Y 축 및 데이터 시리즈를 포함한 차트의 기본 속성을 정의합니다. 마지막으로 setOption 메소드를 통해 이러한 속성을 차트에 설정합니다.

선형 차트 만들기

선형 차트는 데이터 추세를 보여주는 차트 유형입니다. 다음은 ECharts와 golang을 사용하여 꺾은선형 차트를 구현하는 방법을 설명합니다.

먼저 필수 데이터를 준비해야 합니다. 예를 들어 golang에서는

xData := []string{"2010", "2011", "2012", "2013", "2014", "2015", "2016"}
yData := []int{120, 200, 150, 80, 70, 110, 130}
로그인 후 복사

그런 다음 ECharts의 인스턴스를 정의하고 차트의 기본 속성을 설정해야 합니다. 예:

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

var option = {
  title: {
    text: '折线图'
  },
  tooltip: {},
  xAxis: {
    data: xData
  },
  yAxis: {},
  series: [{
    name: '数据',
    type: 'line',
    data: yData
  }]
};

chart.setOption(option);
로그인 후 복사

코드에서는 ECharts 인스턴스를 정의하고 차트의 ID를 지정한 다음 제목, X/Y 축 및 데이터 시리즈를 포함한 차트의 기본 속성을 정의합니다. 차이점은 여기서는 데이터 시리즈의 유형을 폴리라인 유형인 선으로 설정한다는 것입니다.

원형 차트 만들기

원형 차트는 데이터의 비율을 표시하는 차트 유형입니다. 다음은 ECharts와 golang을 사용하여 원형 차트를 구현하는 방법을 설명합니다.

먼저 필수 데이터를 준비해야 합니다. 예를 들어 golang에서는

data := []struct {
  Value float64 `json:"value"`
  Name  string  `json:"name"`
}{
  {Value: 335, Name: "A"},
  {Value: 310, Name: "B"},
  {Value: 234, Name: "C"},
  {Value: 135, Name: "D"},
  {Value: 1548, Name: "E"}
}
로그인 후 복사

그런 다음 ECharts의 인스턴스를 정의하고 차트의 기본 속성을 설정해야 합니다. 예:

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

var option = {
  title: {
    text: '饼图'
  },
  tooltip: {},
  series: [{
    name: '数据',
    type: 'pie',
    radius: '50%',
    data: data,
    roseType: 'angle'
  }]
};

chart.setOption(option);
로그인 후 복사

코드에서는 ECharts 인스턴스를 정의하고 차트의 ID를 지정한 다음 제목 및 데이터 시리즈를 포함한 차트의 기본 속성을 정의합니다. 차이점은 여기서는 데이터 시리즈의 유형을 원형 차트 유형인 원형으로 설정하고, radius 및 roseType과 같은 원형 차트의 다른 속성을 설정한다는 것입니다.

요약하자면 ECharts와 golang을 사용하여 막대형 차트, 꺾은선형 차트, 원형 차트를 만드는 방법을 소개하고 구체적인 코드 예제를 제공했습니다. 물론 이는 ECharts와 golang의 빙산의 일각에 불과합니다. 두 도구 모두 매우 풍부한 사용 시나리오와 기능을 갖추고 있어 독자는 계속해서 깊이 있게 배우고 탐색할 수 있습니다.

위 내용은 ECharts 및 golang 실용 가이드: 다양한 유형의 통계 차트 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿