go-charts 0.0. 3版本釋出，相容更多的 echarts 設定

go-charts基於生成資料圖表，無其它模組的依賴純golang的實現，支援svg與png的輸出，Apache ECharts在前端開發中得到眾多開發者的認可，go-charts相容Apache ECharts的設定引數，簡單快捷的生成相似的圖表(svg或png)，方便插入至Email或分享使用。下面為常用的幾種圖表截圖(兩種模式)：

支援圖表型別

暫僅支援三種的圖表型別：line, bar 以及 pie

範例

go-charts相容了echarts的引數設定，可簡單的使用json形式的設定字串則可快速生成圖表。

package main

import (
	"os"

	charts "github.com/vicanso/go-charts"
)

func main() {
	buf, err := charts.RenderEChartsToPNG(`{
		"title": {
			"text": "Line"
		},
		"xAxis": {
			"type": "category",
			"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
		},
		"series": [
			{
				"data": [150, 230, 224, 218, 135, 147, 260]
			}
		]
	}`)
	if err != nil {
		panic(err)
	}
	os.WriteFile("output.png", buf, 0600)
}

引數說明

• theme 顏色主題，支援dark與light模式，預設為light
• padding 圖表的內邊距，單位px。支援以下幾種模式的設定
  • padding: 5 設定內邊距為5
  • padding: [5, 10] 設定上下的內邊距為 5，左右的內邊距為 10
  • padding:[5, 10, 5, 10] 分別設定上右下左邊距
• title 圖表標題，包括標題內容、高度、顏色等
  • title.text 標題內容
  • title.left 標題與容器左側的距離，可設定為left, right, center, 20% 以及 20 這樣的具體數值
  • title.top 標題與容器頂部的距離，暫僅支援具體數值，如20
  • title.textStyle.color 標題文字顏色
  • title.textStyle.fontSize 標題文字字型大小
  • title.textStyle.height 標題高度
  • title.textStyle.fontFamily 標題文字的字型系列，需要注意此設定是會影響整個圖表的字型
• xAxis 直角座標系grid中的x軸，由於go-charts僅支援單一個x軸，因此若引數為陣列多個x軸，只使用第一個設定
  • xAxis.boundaryGap 座標軸兩邊留白策略，僅支援三種設定方式null, true或者false。null或true時則資料點展示在兩個刻度中間
  • xAxis.splitNumber 座標軸的分割段數，需要注意的是這個分割段數只是個預估值，最後實際顯示的段數會在這個基礎上根據分割後坐標軸刻度顯示的易讀程度作調整
  • xAxis.data x軸的展示文案，暫只支援字串陣列，如["Mon", "Tue"]，其數量需要與展示點一致
• yAxis 直角座標系grid中的y軸，最多支援兩個y軸
  • yAxis.min 座標軸刻度最小值，若不設定則自動計算
  • yAxis.max 座標軸刻度最大值，若不設定則自動計算
  • yAxis.axisLabel.formatter 刻度標籤的內容格式器，如"formatter": "{value} kg"
• legend 圖表中不同系列的標記
  • legend.data 圖例的資料陣列，為字串陣列，如["Email", "Video Ads"]
  • legend.align 圖例標記和文字的對齊，預設為標記靠左left
  • legend.padding legend的padding，設定方式與圖表的padding一致
  • legend.left legend離容器左側的距離，其值可以為具體的畫素值(20)或百分比(20%)
  • legend.right legend離容器右側的距離，其值可以為具體的畫素值(20)或百分比(20%)
• series 圖表的資料項列表
  • series.type 圖表的展示型別，暫支援line, bar以及pie，需要注意pie只能單獨使用
  • series.yAxisIndex 該資料項使用的y軸，預設為0，對yAxis的設定對應
  • series.itemStyle.color 該資料項展示時使用的顏色
  • series.data 資料項對應的資料陣列，支援以下形式的資料：
    • 數值 常用形式，陣列資料為浮點陣列，如[1.1, 2,3, 5.2]
    • 結構體 pie圖表或bar圖表中指定樣式使用，如[{"value": 1048, "name": "Search Engine"},{"value": 735,"name": "Direct"}]

效能

簡單的圖表生成PNG在20ms左右，而SVG的效能則更快，效能上比起使用chrome headless載入echarts圖表展示頁面再截圖生成的方式大幅度提升，滿足簡單的圖表生成需求。

goos: darwin
goarch: amd64
pkg: github.com/vicanso/go-charts
cpu: Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
BenchmarkEChartsRenderPNG-8           60          17765045 ns/op         2492854 B/op       1007 allocs/op
BenchmarkEChartsRenderSVG-8          282           4303042 ns/op        32622688 B/op       2983 allocs/op

中文字元

預設使用的字元為Roboto為英文字型庫，因此如果需要顯示中文字元需要增加中文字型庫，InstallFont函數可新增對應的字型庫，成功新增之後則指定title.textStyle.fontFamily即可。 在瀏覽器中使用svg時，如果指定的fontFamily不支援中文字元，展示的中文並不會亂碼，但是會導致在計算字元寬度等錯誤。