検索
ホームページJava&#&チュートリアルECharts と Java インターフェイス: 折れ線グラフ、棒グラフ、円グラフなどの統計グラフを迅速に実装する方法。

ECharts と Java インターフェイス: 折れ線グラフ、棒グラフ、円グラフなどの統計グラフを迅速に実装する方法。

ECharts と Java インターフェイス: 折れ線グラフ、棒グラフ、円グラフなどの統計グラフを迅速に実装する方法には、特定のコード例が必要です

インターネット時代の到来により、データ分析の重要性はますます高まっています。統計グラフは非常に直感的で強力な表示方法であり、データをより明確に表示できるため、データの意味やパターンをより深く理解できるようになります。 Java 開発では、ECharts と Java インターフェイスを使用して、さまざまな統計グラフをすばやく表示できます。

ECharts は、Baidu が開発した HTML5 Canvas をベースにしたデータ視覚化チャート ライブラリで、折れ線グラフ、棒グラフ、円グラフなどのさまざまなグラフを簡単に描画できます。 Java インターフェイスは、バックエンド データがフロントエンド ディスプレイと対話できるようにするテクノロジーであり、Java コードを通じてデータをフロントエンドに渡すことができます。次に、ECharts と Java インターフェイスを使用して、さまざまな統計グラフをすばやく表示する方法を紹介します。

  1. 折れ線グラフの実装

折れ線グラフは、データ ポイントを接続してデータの傾向を表すグラフです。 ECharts では、次のコードを通じて折れ線グラフを実装できます。

// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '折线图'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["周一","周二","周三","周四","周五","周六","周日"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 20, 30, 40]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

上記のコードは、ECharts を使用して折れ線グラフを実装する方法を示しています。オプション オブジェクトでは、チャートのタイトル、X 軸と Y 軸のラベルなど、チャートのさまざまなパラメーターを設定できます。シリーズ内のdata属性にデータを渡すことで、対応するデータをグラフに表示できます。最後に setOption メソッドを使用してグラフをレンダリングします。

Java で折れ線グラフを実装するにはどうすればよいですか?次の Java コードを通じてデータをフロントエンドに渡すことができます:

@RequestMapping("/echarts")
@ResponseBody
public Map<String,Object> echarts(){
    List<String> categories = new ArrayList<String>();
    categories.add("周一");
    categories.add("周二");
    categories.add("周三");
    categories.add("周四");
    categories.add("周五");
    categories.add("周六");
    categories.add("周日");

    List<Integer> data = new ArrayList<Integer>();
    data.add(5);
    data.add(20);
    data.add(36);
    data.add(10);
    data.add(20);
    data.add(30);
    data.add(40);

    Map<String,Object> result = new HashMap<String,Object>();
    result.put("categories",categories);
    result.put("data",data);

    return result;
}

上記のコードでは、Map オブジェクトを作成し、x 軸と y 軸のデータをそれぞれカテゴリとデータに配置します。次に、Map オブジェクトをフロントエンドに返します。

最後に、次の JS コードをフロントエンド コードに追加して、折れ線グラフのバックエンド データのレンダリングを完了します。

$.ajax({
    url: '/echarts',
    type: 'get',
    success: function(data){
        var categories = data.categories;
        var data = data.data;
        var option = {
            title: {
                text: '折线图'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: categories
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: data
            }]
        };
        myChart.setOption(option);
    },
    error: function(){
        alert('error');
    }
});
  1. 棒グラフの実装

棒グラフは、さまざまなカテゴリのデータのサイズを比較するために使用されるグラフです。 ECharts では、次のコードを通じてヒストグラムを実装できます。

// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '柱状图'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["周一","周二","周三","周四","周五","周六","周日"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 20, 30, 40]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

上記のコードは、ECharts を使用してヒストグラムを実装する方法を示しています。折れ線グラフと同様に、グラフのタイトル、X 軸と Y 軸のラベルなど、オプション オブジェクトでグラフのさまざまなパラメータを設定できます。同時に、type 属性を「bar」に設定するだけで、折れ線グラフを棒グラフに変換できます。

Java でヒストグラムを実装するにはどうすればよいですか?次の Java コードを通じてデータをフロントエンドに渡すことができます:

@RequestMapping("/echarts")
@ResponseBody
public Map<String,Object> echarts(){
    List<String> categories = new ArrayList<String>();
    categories.add("周一");
    categories.add("周二");
    categories.add("周三");
    categories.add("周四");
    categories.add("周五");
    categories.add("周六");
    categories.add("周日");

    List<Integer> data = new ArrayList<Integer>();
    data.add(5);
    data.add(20);
    data.add(36);
    data.add(10);
    data.add(20);
    data.add(30);
    data.add(40);

    Map<String,Object> result = new HashMap<String,Object>();
    result.put("categories",categories);
    result.put("data",data);

    return result;
}

上記のコードでは、Map オブジェクトを作成し、x 軸と y 軸のデータをそれぞれカテゴリとデータに配置します。次に、Map オブジェクトをフロントエンドに返します。次の JS コードをフロントエンド コードに追加して、ヒストグラムのバックエンド データのレンダリングを完了します。

$.ajax({
    url: '/echarts',
    type: 'get',
    success: function(data){
        var categories = data.categories;
        var data = data.data;
        var option = {
            title: {
                text: '柱状图'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: categories
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: data
            }]
        };
        myChart.setOption(option);
    },
    error: function(){
        alert('error');
    }
});
  1. 円グラフの実装

円グラフは次のとおりです。データの比率をグラフで表現する方法。 ECharts では、次のコードを通じて円グラフを実装できます。

// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '饼图',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

上記のコードは、ECharts を使用して円グラフを実装する方法を示しています。折れ線グラフや棒グラフと同様に、グラフのタイトル、X 軸と Y 軸のラベルなど、オプション オブジェクトでグラフのさまざまなパラメータを設定できます。シリーズ内のdata属性にデータを渡すことで、対応するデータをグラフに表示できます。ここでの円グラフ データは、{value:335, name:'direct access'} など、値と名前に対応する形式を満たす必要があることに注意してください。

Java で円グラフを実装するにはどうすればよいですか?次の Java コードを通じてデータをフロントエンドに渡すことができます:

@RequestMapping("/echarts")
@ResponseBody
public List<Map<String,Object>> echarts(){
    List<Map<String,Object>> result = new ArrayList<Map<String,Object>>();

    Map<String,Object> data1 = new HashMap<String,Object>();
    data1.put("value",335);
    data1.put("name","直接访问");
    result.add(data1);

    Map<String,Object> data2 = new HashMap<String,Object>();
    data2.put("value",310);
    data2.put("name","邮件营销");
    result.add(data2);

    Map<String,Object> data3 = new HashMap<String,Object>();
    data3.put("value",234);
    data3.put("name","联盟广告");
    result.add(data3);

    Map<String,Object> data4 = new HashMap<String,Object>();
    data4.put("value",135);
    data4.put("name","视频广告");
    result.add(data4);

    Map<String,Object> data5 = new HashMap<String,Object>();
    data5.put("value",1548);
    data5.put("name","搜索引擎");
    result.add(data5);

    return result;
}

上記のコードでは、5 つの要素を持つ Map 配列を作成し、値と名前を Map に保存します。次に、Map 配列をフロントエンドに返します。次の JS コードをフロントエンド コードに追加して、円グラフのバックエンド データのレンダリングを完了します。

$.ajax({
    url: '/echarts',
    type: 'get',
    success: function(data){
        var legendData = [];
        var seriesData = [];
        $.each(data,function(index,item){
            legendData.push(item.name);
            seriesData.push(item);
        });

        var option = {
            title: {
                text: '饼图',
                subtext: '数据来自网络'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: legendData
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: seriesData
                }
            ]
        };
        myChart.setOption(option);
    },
    error: function(){
        alert('error');
    }
});

概要:

上記の例を通じて、ECharts と統計の表示には Java インターフェイスが使用されます。グラフは非常に単純です。フロントエンド コードで Java インターフェイスを呼び出してデータを取得し、それを ECharts のオプション オブジェクトに渡すだけです。 Java インターフェイスでは、まずデータを Map や List などのコレクション オブジェクトにカプセル化してから、フロントエンドに返す必要があります。当然ですが、Spring Boot を使用した方が便利です。 ECharts と Java インターフェイスの組み合わせは、フロントエンドとバックエンドを分離したさまざまな開発モデルに適応できます。

以上がECharts と Java インターフェイス: 折れ線グラフ、棒グラフ、円グラフなどの統計グラフを迅速に実装する方法。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ECharts和Java接口:如何实现统计图表数据导出与分享ECharts和Java接口:如何实现统计图表数据导出与分享Dec 17, 2023 am 08:44 AM

ECharts是一款功能强大、灵活可定制的开源图表库,可用于数据可视化和大屏展示。在大数据时代,统计图表的数据导出和分享功能变得越来越重要。本文将介绍如何通过Java接口实现ECharts的统计图表数据导出和分享功能,并提供具体的代码示例。一、ECharts简介ECharts是百度开源的一款基于JavaScript和Canvas的数据可视化库,具有丰富的图表

使用PHP和ECharts创建可视化图表和报表使用PHP和ECharts创建可视化图表和报表May 10, 2023 pm 10:21 PM

随着大数据时代的来临,数据可视化成为企业决策的重要工具。千奇百怪的数据可视化工具层出不穷,其中ECharts以其强大的功能和良好的用户体验受到了广泛的关注和应用。而PHP作为一种主流的服务器端语言,也提供了丰富的数据处理和图表展示功能。本文将介绍如何使用PHP和ECharts创建可视化图表和报表。ECharts简介ECharts是一个开源的可视化图表库,它由

ECharts入门指南:如何使用EChartsECharts入门指南:如何使用EChartsDec 17, 2023 am 09:26 AM

ECharts入门指南:如何使用ECharts,需要具体代码示例ECharts是一款基于JavaScript的数据可视化库,通过使用ECharts,用户可以轻松地展示各种各样的图表,如折线图、柱状图、饼图等等。本文将为您介绍如何使用ECharts,并提供详细的代码示例。安装ECharts要使用ECharts,您首先需要安装它。您可以从ECharts官网htt

vue3怎么封装ECharts组件vue3怎么封装ECharts组件May 20, 2023 pm 03:22 PM

一、前言前端开发需要经常使用ECharts图表渲染数据信息,在一个项目中我们经常需要使用多个图表,选择封装ECharts组件复用的方式可以减少代码量,增加开发效率。二、封装ECharts组件为什么要封装组件避免重复的工作量,提升复用性使代码逻辑更加清晰,方便项目的后期维护封装组件可以让使用者不去关心组件的内部实现以及原理,能够使一个团队更好的有层次的去运行封装的ECharts组件实现了以下的功能:使用组件传递ECharts中的option属性手动/自动设置chart尺寸chart自适应宽高动态展

利用ECharts和Python接口生成漏斗图的步骤利用ECharts和Python接口生成漏斗图的步骤Dec 17, 2023 am 10:08 AM

利用ECharts和Python接口生成漏斗图的步骤,需要具体代码示例漏斗图是一种常用的数据可视化工具,可以用于展示数据在不同阶段之间的变化情况。利用ECharts和Python接口,我们可以轻松地生成漂亮的漏斗图。下面,将按照以下步骤介绍如何实现漏斗图的生成,并给出具体的代码示例。步骤一:安装ECharts和Python接口首先,我们需要安装ECharts

如何在Python中使用ECharts绘制堆叠柱状图如何在Python中使用ECharts绘制堆叠柱状图Dec 17, 2023 am 09:48 AM

在数据可视化领域,堆叠柱状图是一种常见的可视化方式。它将多个数据系列绘制成一个条形,每个条形由多个子项组成,每个子项对应一个数据系列,在同一坐标系下进行展示。这种图表可以用于比较不同类别或数据系列的总大小、每个类别或数据系列的组成比例等。在Python中,我们可以使用ECharts库来绘制堆叠柱状图,而且该库具有丰富的可定制性和交互性。一、安装和导入ECha

如何利用ECharts和Python接口绘制箱线图如何利用ECharts和Python接口绘制箱线图Dec 17, 2023 am 10:03 AM

如何利用ECharts和Python接口绘制箱线图,需要具体代码示例引言:箱线图(Boxplot)是统计学中常用的一种可视化方法,用于显示实数型数据的分布情况,通过绘制数据的五数概括(最小值、下四分位数、中位数、上四分位数和最大值)以及异常值,可以直观地了解数据的偏态、离散程度和异常值情况。本文将介绍如何利用ECharts和Python接口来绘制箱线图,并

如何在ECharts中使用桑基图展示数据流向如何在ECharts中使用桑基图展示数据流向Dec 17, 2023 am 09:38 AM

如何在ECharts中使用桑基图展示数据流向引言:数据可视化是数据分析中的重要环节,能够将复杂的数据通过图表等方式直观地展示出来。ECharts是一个功能强大的数据可视化库,支持多种图表类型,其中桑基图(SankeyDiagram)能够非常直观地展示数据的流向关系。本文将介绍如何在ECharts中使用桑基图展示数据流向,并提供具体的代码示例。引入EChar

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。