ECharts と Java インターフェイスをゼロから学ぶ: カラフルな統計グラフを作成する-＆＃＆チュートリアル-php.cn

ECharts と Java インターフェイスをゼロから学ぶ: カラフルな統計グラフを作成する

WBOY

リリース： 2023-12-17 10:29:12

オリジナル

1536 人が閲覧しました

ECharts と Java インターフェイスをゼロから学ぶ: カラフルな統計グラフを作成する

近年、ビッグデータ分析の台頭により、統計グラフが重要な役割を果たしています。データの視覚化は重要な役割を果たします。 ECharts は強力なデータ視覚化ライブラリとして、開発者がデータを効果的に表示および分析するためのカラフルな統計グラフを作成するのに役立ちます。 Java インターフェイスを介して、バックエンドデータをフロントエンド EChart にシームレスに接続できます。この記事では、EChart と Java インターフェイスを一から学び、いくつかの具体的なコード例を共有します。

ECharts の基本概要
ECharts は、Baidu によるオープンソースのデータ視覚化ライブラリであり、折れ線グラフ、棒グラフ、円グラフなどのさまざまな種類のグラフをサポートしています。豊富な設定項目とインタラクティブな機能を提供し、さまざまなデータ可視化ニーズに対応します。
インストールと使用
まず、最新バージョンの ECharts をダウンロードする必要があります。公式サイト（https://echarts.apache.org/zh/index.html）からダウンロード後、プロジェクトディレクトリに解凍してください。次に、ECharts の視覚化ライブラリを HTML ページに導入します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>统计图表示例</title>
    <script src="echarts.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        // 在这里编写生成图表的代码
    </script>
</body>
</html>

ログイン後にコピー

折れ線グラフの描画例
以下では、単純な折れ線グラフを例として使用方法を紹介します。 ECharts でチャートを描画します。

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

var option = {
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line'
    }]
};

option && myChart.setOption(option);

ログイン後にコピー

上記のコードでは、まず chart div 要素を取得し、ECharts インスタンスを作成します。次に、option 設定項目で、X 軸と Y 軸のデータ、および折れ線グラフのデータを指定します。最後に、setOption メソッドを呼び出して、構成項目をグラフに適用します。

Java インターフェイスと EChart の組み合わせ
実際のプロジェクトでは、多くの場合、Java バックエンドを通じてデータを取得し、そのデータを EChart に渡して、対応するチャートを生成する必要があります。現時点では、Java インターフェイスを使用して EChart と対話できます。

まず、データを取得するためのインターフェイスを Java で記述する必要があります。以下は、単純な Java インターフェイスの例です。

@RestController
public class ChartDataController {

    @GetMapping("/chartData")
    public List<Integer> getChartData() {
        // 在这里编写获取数据的代码
        List<Integer> data = new ArrayList<>();
        data.add(120);
        data.add(200);
        data.add(150);
        data.add(80);
        data.add(70);
        data.add(110);
        data.add(130);
        return data;
    }
}

ログイン後にコピー

上記のコードでは、/chartData パスを、@GetMapping を通じてチャートデータを取得するメソッドにマップします。注釈。実際のプロジェクトでは、このメソッドでデータベースやインターフェイスなどを呼び出してデータを取得できます。

次に、フロントエンド JavaScript コードの Ajax リクエストを通じてデータを取得し、そのデータを ECharts に渡してグラフを生成する必要があります。

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

$.ajax({
    url: '/chartData',
    success: function(data) {
        var option = {
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data,
                type: 'line'
            }]
        };

        option && myChart.setOption(option);
    }
});

ログイン後にコピー

上記の JavaScript コードでは、jQuery の ajax メソッドを使用してリクエストを送信し、URL を /chartData として指定し、成功後にデータを取得します。次に、データに基づいて対応するチャートを生成します。

上記の例を通じて、ECharts と Java インターフェイスをゼロから学習してカラフルな統計グラフを作成する方法を予備的に理解することができます。もちろん、これは単なる導入例であり、実際のプロジェクトでは、より複雑なデータ処理やチャートのカスタマイズが含まれる場合があります。この記事があなたにインスピレーションを与え、データ視覚化における画期的な進歩に役立つことを願っています。楽しいプログラミングを！

以上がECharts と Java インターフェイスをゼロから学ぶ: カラフルな統計グラフを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。