需求
项目要求为每一个阿里云大客户每周生成一份周报，周报内容包括各类云产品（如ECS/SLB/RDS/CDN）使用情况。我们知道通过前端js可以将highcharts曲线图/饼图等转换成图片格式，但是只能在线convert，也就是图片需要上传到highcharts服务器，数据安全肯定无法保证，所以本文借助phantomjs这个利器来直接通过服务端生成图片
highcharts配置项结构体定义
1. 曲线图定义
//series结构体定义
type Series struct {
Data [][]interface{} `json:"data"`
Name string `json:"name"`
PointInterval int `json:"pointInterval"`
}
//chart配置结构体定义
type ChartOption struct {
Title struct {
Margin int `json:"margin"`
Style struct {
FontSize string `json:"fontSize"`
FontWeight string `json:"fontWeight"`
} `json:"style"`
Text string `json:"text"`
X int `json:"x"`
} `json:"title"`
Chart struct {
Type string `json:"type"`
BackgroundColor string `json:"backgroundColor"`
} `json:"chart"`
Credits struct {
Enabled bool `json:"enabled"`
} `json:"credits"`
XAxis struct {
Type string `json:"type"`
DateTimeLabelFormats struct {
Day string `json:"day"`
} `json:"dateTimeLabelFormats"`
TickInterval int `json:"tickInterval"`
} `json:"xAxis"`
YAxis struct {
Labels struct {
Format string `json:"format"`
Style struct {
FontSize string `json:"fontSize"`
FontWeight string `json:"fontWeight"`
} `json:"style"`
} `json:"labels"`
Title struct {
Text string `json:"text"`
} `json:"title"`
} `json:"yAxis"`
PlotOptions struct {
Line struct {
DataLabels struct {
Enabled bool `json:"enabled"`
} `json:"dataLabels"`
} `json:"line"`
} `json:"plotOptions"`
Series []Series `json:"series"`
Exporting struct {
SourceWidth int `json:"sourceWidth"`
SourceHeight int `json:"sourceHeight"`
Scale int `json:"scale"`
} `json:"exporting"`
}
2. 饼图定义
type PieOption struct {
Chart struct {
BackgroundColor string `json:"backgroundColor"`
} `json:"chart"`
Colors []string `json:"colors"`
Credits struct {
Enabled bool `json:"enabled"`
} `json:"credits"`
PlotOptions struct {
Pie struct {
DataLabels struct {
Format string `json:"format"`
} `json:"dataLabels"`
} `json:"pie"`
} `json:"plotOptions"`
Series [1]struct {
Data [][]interface{} `json:"data"`
DataLabels struct {
Style struct {
FontSize string `json:"fontSize"`
FontWeight string `json:"fontWeight"`
} `json:"style"`
} `json:"dataLabels"`
Type string `json:"type"`
} `json:"series"`
Title struct {
Margin int `json:"margin"`
Style struct {
FontSize string `json:"fontSize"`
FontWeight string `json:"fontWeight"`
} `json:"style"`
Text string `json:"text"`
} `json:"title"`
}
初始化highchart配置
1. 曲线图配置初始化(sample)
func NewChartOption() ChartOption {
cht := ChartOption{}
cht.Title.Margin = 30
cht.Title.Style.FontSize = "18px"
cht.Title.Style.FontWeight = "bold"
cht.Title.X = -20
cht.Chart.Type = "line"
cht.Chart.BackgroundColor = "#f5f5f5"
cht.Credits.Enabled = false
cht.XAxis.Type = "datetime"
cht.XAxis.DateTimeLabelFormats.Day = "%m月/%d日"
cht.YAxis.Labels.Style.FontSize = "14px"
cht.YAxis.Labels.Style.FontWeight = "bold"
cht.PlotOptions.Line.DataLabels.Enabled = false
cht.Exporting.Scale = 1
cht.Exporting.SourceHeight = 400 //图片高度
cht.Exporting.SourceWidth = 600 //图片宽度
return cht
}
2. 饼图配置初始化(sample)
func NewPieOption() PieOption {
pie := PieOption{}
pie.Title.Margin = 30
pie.Title.Style.FontSize = "18px"
pie.Title.Style.FontWeight = "bold"
pie.Credits.Enabled = false
pie.Colors = []string{"#0067cc", "#30bfff", "#02fdff", "#4ad1d1", "#00b4cc", "#0193cd"} //饼图颜色
pie.Chart.BackgroundColor = "#f5f5f5" //背景颜色
pie.Series[0].Type = "pie"
pie.Series[0].DataLabels.Style.FontSize = "14px"
pie.Series[0].DataLabels.Style.FontWeight = "bold"
return pie
}
highcharts插件
插件下载：https://github.com/pesla/highcharts-phantomjs 安装phantomjs或者直接下载二进制bin文件数据加载到highcharts以及后端生成图片代码
chartoption := NewChartOption()
chartoption.Title.Text = "xxx"
chartoption.YAxis.Labels.Format = "{value}"
chartoption.XAxis.TickInterval = 24 * 3600 * 1000 //天粒度
chartoption.Exporting.SourceWidth = 1200 //宽度
chartoption.PlotOptions.Line.DataLabels.Enabled = true //无水印
chartoption.XAxis.DateTimeLabelFormats.Day = "%Y/%m/%d" //日期格式
var inputData [][]interface{}
for _, v := range data {
inputData = append(inputData, []interface{}{v.Timestamp * 1000, v.Rate})
}
chartoption.Series = append(chartoption.Series, common.Series{Name: "xxx", Data: inputData, PointInterval: 24 * 3600 * 1000})
chartBytes, _ := json.Marshal(chartoption)
optionjson := "test.json"
f, _ := os.Create(optionjson)
defer os.Remove(f.Name())
f.Write(chartBytes) //将配置写入json文件
png := "out.png" //输出图片名
cmd := exec.Command("./phantomjs", "/highcharts/js/highcharts-convert.js", "-infile", optionjson, "-outfile", png)
cmd.Stdout = os.Stdout
cmd.Run()
}
## 结语
自从有了phantomjs，再也不用担心后端干不了前端的活了。。。
