ホームページ > バックエンド開発 > Golang > ECharts と golang 実践ガイド: さまざまな種類の統計グラフの作成

ECharts と golang 実践ガイド: さまざまな種類の統計グラフの作成

WBOY
リリース: 2023-12-17 22:30:19
オリジナル
986 人が閲覧しました

ECharts和golang实践指南: 制作各种类型的统计图表

ECharts と golang 実践ガイド: さまざまな種類の統計グラフの作成

デジタル時代の到来により、データの価値がますます注目されています。しかし、データの価値はその分析と活用にのみ存在します。データをより適切に分析するには、グラフは不可欠なツールの 1 つです。この記事では、有名なツールであるEChartsとgolangを使って、さまざまな種類の統計グラフを作成する方法を紹介します。

準備

まず、ECharts と golang 環境を準備する必要があります。

ECharts は、優れた対話性と動的な効果を備えた JavaScript ベースのオープン ソース データ視覚化ライブラリであり、複数のグラフ タイプをサポートしています。 ECharts は次の 2 つの方法でインストールできます。

  1. echarts.js ファイルを直接ダウンロードして HTML に導入します
  2. npm を使用してインストールします

ここでは、ダウンロード後に HTML ファイルに導入できる最初の方法を選択します:

<script src="/path/echarts.min.js"></script>
ログイン後にコピー

golang は静的型のコンパイル言語であり、同時実行性と効率性を重視しており、バックエンド開発で取得されます。応用範囲。 golang 環境をインストールする必要があります。これは、公式 Web サイトから対応するインストール パッケージをダウンロードすることでインストールできます。

ヒストグラムの作成

ヒストグラムは、データの違いを示す一般的なグラフの種類です。以下では、ECharts と golang を使用してヒストグラムを実装する方法について説明します。

まず、必要なデータを準備する必要があります。たとえば、golang の場合:

data := []int{120, 200, 150, 80, 70, 110, 130}
ログイン後にコピー

次に、ECharts のインスタンスを定義し、チャートの基本プロパティを設定する必要があります。例:

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

var option = {
  title: {
    text: '柱状图'
  },
  tooltip: {},
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
  },
  yAxis: {},
  series: [{
    name: '数据',
    type: 'bar',
    data: data
  }]
};

chart.setOption(option);
ログイン後にコピー

コードでは、ECharts インスタンスを定義してチャートの ID を指定し、タイトル、X/Y 軸、データ系列などのチャートの基本プロパティを定義します。最後に、setOption メソッドを使用してこれらのプロパティをチャートに設定します。

折れ線グラフの作成

折れ線グラフは、データの傾向を示すグラフの一種です。以下では、ECharts と golang を使用して折れ線グラフを実装する方法について説明します。

まず、必要なデータを準備する必要があります。たとえば、golang の場合:

xData := []string{"2010", "2011", "2012", "2013", "2014", "2015", "2016"}
yData := []int{120, 200, 150, 80, 70, 110, 130}
ログイン後にコピー

次に、ECharts のインスタンスを定義し、チャートの基本プロパティを設定する必要があります。例:

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

var option = {
  title: {
    text: '折线图'
  },
  tooltip: {},
  xAxis: {
    data: xData
  },
  yAxis: {},
  series: [{
    name: '数据',
    type: 'line',
    data: yData
  }]
};

chart.setOption(option);
ログイン後にコピー

コードでは、ECharts インスタンスを定義してチャートの ID を指定し、タイトル、X/Y 軸、データ系列などのチャートの基本プロパティを定義します。違いは、ここではデータ系列のタイプを線、つまりポリライン タイプに設定していることです。

円グラフの作成

円グラフは、データの割合を表示するグラフの一種です。以下では、ECharts と golang を使用して円グラフを実装する方法について説明します。

まず、必要なデータを準備する必要があります。たとえば、golang の場合:

data := []struct {
  Value float64 `json:"value"`
  Name  string  `json:"name"`
}{
  {Value: 335, Name: "A"},
  {Value: 310, Name: "B"},
  {Value: 234, Name: "C"},
  {Value: 135, Name: "D"},
  {Value: 1548, Name: "E"}
}
ログイン後にコピー

次に、ECharts のインスタンスを定義し、チャートの基本プロパティを設定する必要があります。例:

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

var option = {
  title: {
    text: '饼图'
  },
  tooltip: {},
  series: [{
    name: '数据',
    type: 'pie',
    radius: '50%',
    data: data,
    roseType: 'angle'
  }]
};

chart.setOption(option);
ログイン後にコピー

コードでは、ECharts インスタンスを定義してグラフの ID を指定し、タイトルやデータ系列などのグラフの基本プロパティを定義します。違いは、ここではデータ系列のタイプを円グラフのタイプである円に設定し、円グラフの他のプロパティ (radius やroseType など) を設定していることです。

要約すると、ECharts と golang を使用して棒グラフ、折れ線グラフ、円グラフを作成する方法を紹介し、具体的なコード例を示しました。もちろん、これは ECharts と golang の氷山の一角にすぎません。どちらのツールにも非常に豊富な使用シナリオと機能があり、読者は引き続き学習し、深く探索することができます。

以上がECharts と golang 実践ガイド: さまざまな種類の統計グラフの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート