phantomjs技巧之golang后端生成highcharts图片文件-阿里云开发者社区

开发者社区> 葛平> 正文

phantomjs技巧之golang后端生成highcharts图片文件

简介: ## 需求 项目要求为每一个阿里云大客户每周生成一份周报,周报内容包括各类云产品(如ECS/SLB/RDS/CDN)使用情况。我们知道通过前端js可以将highcharts曲线图/饼图等转换成图片格式,但是只能在线convert,也就是图片需要上传到highcharts服务器,数据安全肯定无法保证,所以本文借助phantomjs这个利器来直接通过服务端生成图片 ## highcharts配
+关注继续查看

需求

项目要求为每一个阿里云大客户每周生成一份周报,周报内容包括各类云产品(如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插件

  1. 插件下载:https://github.com/pesla/highcharts-phantomjs
  2. 安装phantomjs或者直接下载二进制bin文件
  3. 数据加载到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,再也不用担心后端干不了前端的活了。。。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
DL之Attention:基于ClutteredMNIST手写数字图片数据集分别利用CNN_Init、ST_CNN算法(CNN+SpatialTransformer)实现多分类预测(二)
DL之Attention:基于ClutteredMNIST手写数字图片数据集分别利用CNN_Init、ST_CNN算法(CNN+SpatialTransformer)实现多分类预测
39 0
DL之Attention:基于ClutteredMNIST手写数字图片数据集分别利用CNN_Init、ST_CNN算法(CNN+SpatialTransformer)实现多分类预测(一)
DL之Attention:基于ClutteredMNIST手写数字图片数据集分别利用CNN_Init、ST_CNN算法(CNN+SpatialTransformer)实现多分类预测
39 0
JS导出PDF插件(支持中文、图片使用路径)
原文:JS导出PDF插件(支持中文、图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题。它的效果可以先到http://pdfmake.org/playground.html查看。
1758 0
C# 使用FileUpload控件上传图片,将文件转换成二进制进行存储与读取
状况描述:   需要上传文件,但是不想要保存到实体路径下,便可以用该功能来实现。   效果图:      点击【Upload】按钮,上传文件到数据库;   点击【Preview】,预览文件;   具体实现:   前台: 1 2 3 4 : 5 ...
1695 0
字符串 全排列生成问题
转自:http://blog.csdn.net/zinss26914/article/details/8939140 问题   输入一个字符串,打印出该字符串中字符的所有排列。例如输入字符串abc,则输出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba 思路   1.
761 0
+关注
葛平
阿里云研发工程师
5
文章
4
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载