ECharts와 golang: 실용적인 통계 차트를 만드는 팁과 경험-Golang-php.cn

ECharts와 golang: 실용적인 통계 차트를 만드는 팁과 경험

PHPz

풀어 주다： 2023-12-17 09:04:36

원래의

1178명이 탐색했습니다.

ECharts和golang: 制作实用的统计图表的技巧与经验

ECharts 및 golang: 실용적인 통계 차트를 만드는 기술과 경험, 구체적인 코드 예제가 필요합니다.

데이터 처리의 대중화와 함께 데이터 시각화는 많은 응용 분야에서 필수적인 기술이 되었습니다. 그리고 차트를 만드는 도구도 등장했습니다. ECharts는 오픈소스 데이터 시각화 도구이며, golang은 고효율, 고동시성 언어입니다. 이 둘을 결합하면 효율적이고 실용적인 차트를 만들 수 있습니다.

이 글에서는 ECharts와 golang을 사용하여 실용적인 통계 차트를 만드는 기술과 경험을 소개하고 구체적인 코드 예제를 제공합니다.

먼저 백엔드에서 프런트엔드로 데이터를 전달해야 합니다. golang에서는 http 패키지를 사용하여 간단한 웹 서비스를 구현할 수 있습니다. 예를 들어 다음은 간단한 웹 서버입니다.

package main

import (
    "encoding/json"
    "net/http"
)

type Data struct {
    Label string `json:"label"`
    Value int    `json:"value"`
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := []Data{
            {"January", 10},
            {"February", 20},
            {"March", 30},
            {"April", 25},
            {"May", 15},
            {"June", 5},
        }

        jsonData, err := json.Marshal(data)
        if err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
            return
        }

        w.Header().Set("Content-Type", "application/json")
        w.Write(jsonData)
    })

    http.ListenAndServe(":8080", nil)
}

로그인 후 복사

다음으로 프런트 엔드에서 ECharts를 사용하여 데이터를 표시하겠습니다. 먼저 ECharts를 html로 도입해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Chart Example</title>
  <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px;height:400px;"></div>
  <script src="chart.js"></script>
</body>
</html>

로그인 후 복사

헤드 태그에 ECharts를 도입하고 차트를 호스팅하기 위해 본문에 div를 배치했습니다. 동시에 데이터를 로드하고 차트를 그리기 위한 "chart.js"라는 js 파일도 도입했습니다.

ECharts를 사용하여 차트를 그리는 코드는 다음과 같습니다.

fetch('/').then(function(response) {
    return response.json();
}).then(function(data) {
    var chartDom = document.getElementById('chart');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: 'My Chart',
            left: 'center',
        },
        tooltip: {},
        xAxis: {
            data: data.map(function(item) {
                return item.label;
            })
        },
        yAxis: {},
        series: [{
            type: 'bar',
            data: data.map(function(item) {
                return item.value;
            })
        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
});

로그인 후 복사

코드는 fetch 함수를 사용하여 데이터를 요청하고 json() 메서드를 사용하여 응답 데이터를 json 개체로 구문 분석합니다. 그런 다음 ECharts 인스턴스를 생성하고 차트의 제목, 도구 설명, X/Y 축 및 막대 시리즈를 설정했습니다.

마지막으로 애플리케이션에서 golang을 사용하여 서버를 실행하고 브라우저에서 html 파일을 엽니다. 이 시점에서 우리는 백엔드에서 정의한 일부 데이터를 표시하는 ECharts와 golang을 사용하여 그린 차트를 볼 수 있습니다.

위는 ECharts와 golang을 사용하여 실용적인 통계 차트를 만드는 기본 예입니다. 더 복잡한 차트를 만들어야 하는 경우 ECharts 공식 문서에서 적절한 구성 옵션을 찾고 golang을 사용하여 데이터를 관리할 수 있습니다. 끊임없는 시도와 연습을 통해 실용성과 아름다움을 겸비한 차트를 만들 수 있을 것입니다.

위 내용은 ECharts와 golang: 실용적인 통계 차트를 만드는 팁과 경험의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!