検索
ホームページ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 までご連絡ください。
Javaがクロスプラットフォームデスクトップアプリケーションを開発するための人気のある選択肢なのはなぜですか?Javaがクロスプラットフォームデスクトップアプリケーションを開発するための人気のある選択肢なのはなぜですか?Apr 25, 2025 am 12:23 AM

javaispopularforsoss-platformdesktopapplicationsduetoits "writeonce、runaynay" philosophy.1)itusesbytecodatiTatrunnanyjvm-adipplatform.2)ライブラリリケンディンガンドジャヴァフククレアティック - ルルクリス

Javaでプラットフォーム固有のコードを作成する必要がある場合がある状況について話し合います。Javaでプラットフォーム固有のコードを作成する必要がある場合がある状況について話し合います。Apr 25, 2025 am 12:22 AM

Javaでプラットフォーム固有のコードを作成する理由には、特定のオペレーティングシステム機能へのアクセス、特定のハードウェアとの対話、パフォーマンスの最適化が含まれます。 1)JNAまたはJNIを使​​用して、Windowsレジストリにアクセスします。 2)JNIを介してLinux固有のハードウェアドライバーと対話します。 3)金属を使用して、JNIを介してMacOSのゲームパフォーマンスを最適化します。それにもかかわらず、プラットフォーム固有のコードを書くことは、コードの移植性に影響を与え、複雑さを高め、パフォーマンスのオーバーヘッドとセキュリティのリスクをもたらす可能性があります。

プラットフォームの独立性に関連するJava開発の将来の傾向は何ですか?プラットフォームの独立性に関連するJava開発の将来の傾向は何ですか?Apr 25, 2025 am 12:12 AM

Javaは、クラウドネイティブアプリケーション、マルチプラットフォームの展開、および言語間の相互運用性を通じて、プラットフォームの独立性をさらに強化します。 1)クラウドネイティブアプリケーションは、GraalvmとQuarkusを使用してスタートアップ速度を向上させます。 2)Javaは、埋め込みデバイス、モバイルデバイス、量子コンピューターに拡張されます。 3)Graalvmを通じて、JavaはPythonやJavaScriptなどの言語とシームレスに統合して、言語間の相互運用性を高めます。

Javaの強力なタイピングは、プラットフォームの独立性にどのように貢献しますか?Javaの強力なタイピングは、プラットフォームの独立性にどのように貢献しますか?Apr 25, 2025 am 12:11 AM

Javaの強力なタイプ化されたシステムは、タイプの安全性、統一タイプの変換、多型を通じてプラットフォームの独立性を保証します。 1)タイプの安全性は、コンパイル時間でタイプチェックを実行して、ランタイムエラーを回避します。 2)統一された型変換ルールは、すべてのプラットフォームで一貫しています。 3)多型とインターフェイスメカニズムにより、コードはさまざまなプラットフォームで一貫して動作します。

Javaネイティブインターフェイス(JNI)がプラットフォームの独立性をどのように妥協できるかを説明します。Javaネイティブインターフェイス(JNI)がプラットフォームの独立性をどのように妥協できるかを説明します。Apr 25, 2025 am 12:07 AM

JNIはJavaのプラットフォームの独立を破壊します。 1)JNIは特定のプラットフォームにローカルライブラリを必要とします。2)ローカルコードをターゲットプラットフォームにコンパイルおよびリンクする必要があります。3)異なるバージョンのオペレーティングシステムまたはJVMは、異なるローカルライブラリバージョンを必要とする場合があります。

Javaのプラットフォームの独立性を脅かしたり強化したりする新しいテクノロジーはありますか?Javaのプラットフォームの独立性を脅かしたり強化したりする新しいテクノロジーはありますか?Apr 24, 2025 am 12:11 AM

新しいテクノロジーは、両方の脅威をもたらし、Javaのプラットフォームの独立性を高めます。 1)Dockerなどのクラウドコンピューティングとコンテナ化テクノロジーは、Javaのプラットフォームの独立性を強化しますが、さまざまなクラウド環境に適応するために最適化する必要があります。 2)WebAssemblyは、Graalvmを介してJavaコードをコンパイルし、プラットフォームの独立性を拡張しますが、パフォーマンスのために他の言語と競合する必要があります。

JVMのさまざまな実装は何ですか、そしてそれらはすべて同じレベルのプラットフォームの独立性を提供しますか?JVMのさまざまな実装は何ですか、そしてそれらはすべて同じレベルのプラットフォームの独立性を提供しますか?Apr 24, 2025 am 12:10 AM

JVMの実装が異なると、プラットフォームの独立性が得られますが、パフォーマンスはわずかに異なります。 1。OracleHotspotとOpenJDKJVMは、プラットフォームの独立性で同様に機能しますが、OpenJDKは追加の構成が必要になる場合があります。 2。IBMJ9JVMは、特定のオペレーティングシステムで最適化を実行します。 3. Graalvmは複数の言語をサポートし、追加の構成が必要です。 4。AzulzingJVMには、特定のプラットフォーム調整が必要です。

プラットフォームの独立性は、開発コストと時間をどのように削減しますか?プラットフォームの独立性は、開発コストと時間をどのように削減しますか?Apr 24, 2025 am 12:08 AM

プラットフォームの独立性により、開発コストが削減され、複数のオペレーティングシステムで同じコードセットを実行することで開発時間を短縮します。具体的には、次のように表示されます。1。開発時間を短縮すると、1セットのコードのみが必要です。 2。メンテナンスコストを削減し、テストプロセスを統合します。 3.展開プロセスを簡素化するための迅速な反復とチームコラボレーション。

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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

EditPlus 中国語クラック版

EditPlus 中国語クラック版

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

Safe Exam Browser

Safe Exam Browser

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