My Note

自己理解のためのブログ

go-echartsを使ってグラフを描画する

Go chart

はじめに

今回は個人開発をしていてGoでグラフを描画したくて、何かいい方法がないか調べたときに go-echarts というOSSパッケージを見つけました。 スター数もかなり多く、サンプルコードも豊富だったので利用しました。

  • 利用したライブラリ
    • go-echarts/go-echarts

github.com

グラフを描画する

■ 試しに作成するグラフの要件

  • ページに複数グラフを表示させる
  • X軸に 10個のポイントを作る
  • Y軸に 300以下の数値をランダム生成
  • ラインを滑らかに引くもの & テーマを適用（ThemeChalk）
  • ラインを滑らかにせず、エリアを色塗りするもの（テーマは指定せずデフォルト）

■ コード

  • main.go
    • go run ./main.go
    • http://localhost:8082 にアクセスする
package main

import (
    "math/rand"
    "net/http"

    "github.com/go-echarts/go-echarts/v2/charts"
    "github.com/go-echarts/go-echarts/v2/components"
    "github.com/go-echarts/go-echarts/v2/opts"
    "github.com/go-echarts/go-echarts/v2/types"
)

const THEME = types.ThemeChalk

func generateLineItems() []opts.LineData {
    items := make([]opts.LineData, 0)
    for i := 0; i < 10; i++ {
        items = append(items, opts.LineData{Value: rand.Intn(300)})
    }
    return items
}

func handler(w http.ResponseWriter, _ *http.Request) {
    page := components.NewPage()
    page.AddCharts(
        lineExampleSmooth(),
        lineExampleArea(),
    )
    page.Render(w)
}

func lineExampleSmooth() *charts.Line {
    line := charts.NewLine()
    line.SetGlobalOptions(
        //charts.WithInitializationOpts(opts.Initialization{Theme: theme}),
        charts.WithInitializationOpts(opts.Initialization{Theme: THEME}),
        charts.WithTitleOpts(opts.Title{
            Title:    "line smooth",
            Subtitle: "Line chart subtile",
        }))

    line.SetXAxis([]string{"1", "2", "3", "4", "5", "6", "7", "8", "9", "10"}).
        AddSeries("Category A", generateLineItems()).
        SetSeriesOptions(charts.WithLineChartOpts(opts.LineChart{Smooth: true}))
    return line
}

func lineExampleArea() *charts.Line {
    line := charts.NewLine()
    line.SetGlobalOptions(
        charts.WithTitleOpts(opts.Title{
            Title: "area options",
        }),
    )
    line.SetXAxis([]string{"1", "2", "3", "4", "5", "6", "7", "8", "9", "10"}).
        AddSeries("Category A", generateLineItems()).
        SetSeriesOptions(
            charts.WithLabelOpts(
                opts.Label{
                    Show: true,
                }),
            charts.WithAreaStyleOpts(
                opts.AreaStyle{
                    Opacity: 0.2,
                }),
        )
    return line
}

func main() {
    http.HandleFunc("/", handler)
    http.ListenAndServe(":8082", nil)
}

■ main.goで生成したグラフ

さいごに

go-echarts を利用してグラフを作成しました。

個人開発では、評価額と損益額のグラフをこのライブラリを利用して作成しています。 X軸に 日付、Y軸に金額を表示するためにDBからデータを適宜取得してグラフを作成しました。 サーバーサイドもGoで実装しているので、作成したいグラフがこのライブラリで事足りるなら jsなど他の言語で書かなくてもGoでそのまま書けるので 便利かなと思います。