ECharts 및 Java 인터페이스를 사용하여 아름다운 3D 통계 차트를 만드는 방법-java지도 시간-php.cn

ECharts 및 Java 인터페이스를 사용하여 아름다운 3D 통계 차트를 만드는 방법

WBOY

풀어 주다： 2023-12-18 17:59:15

원래의

1195명이 탐색했습니다.

ECharts 및 Java 인터페이스를 사용하여 아름다운 3D 통계 차트를 만드는 방법

최근 빅데이터의 발전으로 데이터 시각화가 점점 더 중요한 분야로 자리 잡았습니다. 데이터 시각화는 사람들이 데이터를 더 쉽게 이해하고 분석할 수 있게 해줄 뿐만 아니라 데이터의 아름다움을 높여줍니다. 시각화 분야에서는 데이터의 특성을 보다 직관적으로 표시할 수 있는 3차원 통계 차트가 널리 사용되는 방법이다. 이 기사에서는 ECharts 및 Java 인터페이스를 사용하여 아름다운 3D 통계 차트를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

ECharts 소개

[ECharts](https://echarts.apache.org/zh/index.html)는 효율적인 대화형 차트 및 데이터 시각화 인터페이스를 구축하기 위한 오픈 소스 JavaScript 기반 시각화 라이브러리입니다. ECharts는 막대형 차트, 선형 차트, 분산형 차트, 지도 등 다양한 차트 유형을 지원합니다. 또한 동적 데이터 및 대화형 기능도 지원합니다.

Java 인터페이스 소개

대부분의 경우 차트를 그리려면 백그라운드에서 데이터를 가져와야 합니다. 따라서 데이터를 얻기 위해서는 Java 인터페이스를 사용해야 합니다. Java 인터페이스는 배경과 상호 작용하고 데이터를 얻는 데 사용되는 기술입니다. 이 기사에서는 Java 인터페이스를 사용하여 무작위로 생성된 데이터를 얻어 3D 통계 차트를 그리는 방법을 설명합니다.

1단계: 준비

먼저 ECharts를 다운로드해야 합니다. 최신 버전은 [ECharts 공식 홈페이지](https://echarts.apache.org/zh/download.html)에서 다운로드할 수 있습니다. 또한 Java 코드를 작성하려면 Java IDE(예: Eclipse)도 필요합니다.

2단계: Java 코드 작성

다음은 백그라운드에서 무작위로 생성된 데이터를 가져오는 Java 코드입니다.

@RequestMapping("/getChartData")
@ResponseBody
public String getChartData() {
    int min = 1;
    int max = 100;
    JSONArray jsonArray = new JSONArray();
    for(int i = 0; i < 10; i++) {
        int num1 = (int)(Math.random() * (max - min) + min);
        int num2 = (int)(Math.random() * (max - min) + min);
        int num3 = (int)(Math.random() * (max - min) + min);
        jsonArray.add(new JSONArray(Arrays.asList("data" + (i + 1), num1, num2, num3)));
    }
    return jsonArray.toJSONString();
}

로그인 후 복사

위 코드에서는 Spring MVC 프레임워크를 사용하여 Java 코드를 작성했습니다. 먼저 최대값과 최소값을 설정합니다. 그런 다음 Math.random() 메서드를 통해 무작위로 세 개의 정수를 생성하고 이를 JSONArray 객체에 추가합니다. 마지막으로 JSONArray 객체를 문자열로 변환하고 그 반대로 변환합니다.

3단계: HTML 코드 작성

HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D统计图示例</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="myChart" style="width: 800px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('myChart'));

        var option = {
            title: {
                text: '3D统计图示例'
            },
            tooltip: {},
            legend: {
                data: ['data1', 'data2', 'data3']
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {},
            zAxis: {},
            grid3D: {},
            series: [{
                name: 'data1',
                type: 'bar3D',
                data: []
            },{
                name: 'data2',
                type: 'bar3D',
                data: []
            },{
                name: 'data3',
                type: 'bar3D',
                data: []
            }]
        };
        myChart.setOption(option);
        $.ajax({
            url: 'getChartData',
            type: 'POST',
            success: function (data) {
                data = JSON.parse(data);
                var xAxisData = data.map(function (item) {
                    return item[0];
                });
                var data1 = [], data2 = [], data3 = [];
                for(var i = 0; i < data.length; i++) {
                    data1.push([data[i][0], data[i][1], i]);
                    data2.push([data[i][0], data[i][2], i]);
                    data3.push([data[i][0], data[i][3], i]);
                }
                myChart.setOption({
                    xAxis: {
                        data: xAxisData
                    },
                    series: [{
                        data: data1
                    }, {
                        data: data2
                    }, {
                        data: data3
                    }]
                });
            }
        });

    </script>
</body>
</html>

로그인 후 복사

위 코드에서는 jQuery 라이브러리를 사용하여 무작위로 생성된 데이터를 가져왔습니다. 먼저 3D 통계 차트를 표시하기 위해 div 요소를 만들었습니다. 그런 다음 echarts.init() 메서드를 사용하여 3D 통계 차트를 초기화하고 좌표축, 범례 등과 같은 몇 가지 기본 옵션을 설정합니다. 다음으로 $.ajax() 메서드를 사용하여 배경에서 데이터를 가져와 3D 통계 차트에 표시합니다.

다양한 데이터 계열을 표현하기 위해 세 가지 다른 색상을 사용한다는 점도 언급할 가치가 있습니다.

4단계: 프로그램 실행

마지막으로 브라우저에서 HTML 파일을 열어 프로그램을 실행할 수 있습니다. 브라우저에서는 아름다운 3D 통계 차트를 볼 수 있습니다.

결론

이 글에서는 ECharts와 Java 인터페이스를 사용하여 아름다운 3D 통계 차트를 만드는 방법을 소개합니다. 먼저 백그라운드에서 무작위로 생성된 데이터를 가져온 다음 ECharts를 사용하여 데이터를 시각화합니다. 이런 방식으로 우리는 데이터를 보다 직관적으로 이해하고 분석할 수 있으며 데이터의 아름다움을 향상시킬 수 있습니다. 데이터 시각화에 관심이 있다면 ECharts 및 Java 인터페이스를 사용하여 자신만의 데이터 시각화 프로그램을 만들어 보는 것이 좋습니다!

위 내용은 ECharts 및 Java 인터페이스를 사용하여 아름다운 3D 통계 차트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!