GO + ichartjs + jsonP实现数据图表分析后台

浏览数：34 / 时间：2015年06月10日

1、Go 开发工具 - LiteIDE（安装使用说明）

2、windows下Go环境配置

下载安装包，配置环境变量。

3、Linux下Go环境配置

  假设已经位于Go的安装目录 $GO_INSTALL_DIR下
  #hg clone -u release https://code.google.com/p/go
  #cd go/src
  #./all.bash
  运行all.bash后出现”ALL TESTS PASSED”字样时才算安装成功。上面是Unix风格的命令，Windows下的安装方式类似，只不过是运行all.bat，调用的编译器是MinGW的gcc。
  然后设置几个环境变量，(vi /etc/profile source /etc/profile)
#export GOROOT=$HOME/go
#export GOBIN=$GOROOT/bin
#export PATH=$PATH:$GOBIN

注：可通过$echo $GOBIN 查看环境变量设置若未设置此3项，引用第三方包会有问题例如：unknown driver "mysql" (forgotten import?)

具体安装使用说明

好了，贴代码：

data.go

作用：创建一个web服务，提供数据接口

知识点：建web服务、Go数据对象、jsonP返回数据、Go调用mysql数据库

// test
package main

import (
	"database/sql"
	"encoding/json"
	"fmt"
	_ "mysql"
	"net/http"
)

type DrawData struct {
	Name  string `json:"name"`
	Value []int  `json:"value"`
	Color string `json:"color"`
}

type AllDrawData struct {
	Label     []string   `json:"labels"`
	DrawDatas []DrawData `json:"drawData"`
}

func GetData(w http.ResponseWriter, req *http.Request) {
	req.ParseForm() //解析参数，默认是不会解析的
	var jsonpCallback string = req.Form["jsonpCallback"][0]
	datas := []DrawData{}
	allDrawData := AllDrawData{}

	db, err := sql.Open("mysql", "username:password@tcp(127.0.0.1:3306)/test?charset=utf8")
	defer db.Close()

	rows0, err := db.Query("select A.USERNAME from TEST")
	if err != nil {
		panic(err)
	}
	labels := []string{}
	for rows0.Next() {
		var value string
		err := rows0.Scan(&value)
		if nil != err {
			panic(err)
		}
		labels = append(labels, value)
	}

	rows1, err := db.Query("SELECT CNT from TEST")
	if err != nil {
		panic(err)
	}
	defer rows1.Close()

	data1 := DrawData{}
	values := []int{}
	for rows1.Next() {
		var value int
		err := rows1.Scan(&value)
		if nil != err {
			panic(err)
		}
		values = append(values, value)
	}
	data1.Name = "未完成"
	data1.Value = values
	data1.Color = "#ECAD55"
	datas = append(datas, data1)

	allDrawData.Label = labels
	allDrawData.DrawDatas = datas
	b, _ := json.Marshal(allDrawData)
	fmt.Fprintf(w, jsonpCallback+"("+string(b)+")")
}

func main() {
	http.HandleFunc("/getdatas", GetData)
	http.ListenAndServe(":1234", nil)
	fmt.Println("succeed!")
}

注：Go 中可以按照网上提供安装mysql，也可从这里下载前辈整理好的mysql包解压到go目录的src/pkg目录

html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>ichartjs 示例</title>
		<meta name="Description" content="The ichartjs's gallery center,ichartjs 示例中心" />
		<meta name="Keywords" content="ichartjs demo,Html5 demo,ichartjs示例,ichartjs示例,Html5示例,Html5示例" />
		<script type="text/javascript" src="../js/ichart.1.2.min.js"></script>
        <script type="text/javascript" src="../js/jquery-latest.js"></script>
		<link rel="stylesheet" href="../css/demo.css" type="text/css" />
		<script type="text/javascript">
		var url="http://127.0.0.1:1234/getdatas?jsonpCallback=?";
	    $.getJSON(url,function(data){
			var chart = new iChart.BarStacked2D({
					render : 'canvasDiv',
					data: data.drawData,
					labels:data.labels,
					title : {
						text:'今日订单分配及完成量',
						width:400,
						align:'left',
						background_color : '#495998',
						color:'#c0c8e7'
					},
					subtitle : {
						width:280,
						height:20,
						fontsize:12,
						align:'left',
						color:'#c0c8e7'
					},
					padding:10,
					footnote : 'moyoyo.com',
					width : 800,
					height : 400,
					bar_height:20,
					background_color : '#353757',
					shadow : true,
					shadow_blur : 2,
					shadow_color : '#aaaaaa',
					shadow_offsetx : 1,
					shadow_offsety : 0, 
					sub_option:{
						label:{color:'#ffffff',fontsize:12,fontweight:600},
						border : {
							width : 2,
							color : '#d3d4f0'
						} 
					},
					label:{color:'#d3d4f0',fontsize:12,fontweight:600},
					showpercent:true,
					decimalsnum:0,
					legend:{
						enable:true,
						background_color : null,
						line_height:25,
						color:'#d3d4f0',
						fontsize:12,
						fontweight:600,
						border : {
							enable : false
						}
					},
					coordinate:{
						background_color : 0,
						axis : {
							color : '#c0c8e7',
							width : 0
						}, 
						scale:[{
							 position:'bottom',	
							 scale_enable : false,
							 start_scale:0,
							 scale_space:1,
							 end_scale:12,
							 label:{color:'#d3d4f0',fontsize:11,fontweight:600},
							 listeners:{
								parseText:function(t,x,y){
									return {text:t}
								}
							 }
						}],
						width:600,
						height:260
					}
			});

			//利用自定义组件构造左侧说明文本
			chart.plugin(new iChart.Custom({
					drawFn:function(){
						//计算位置
						var coo = chart.getCoordinate(),
							x = coo.get('originx'),
							y = coo.get('originy'),
							h = coo.height;
						//在左下侧的位置，渲染一个单位的文字
						chart.target.textAlign('start')
						.textBaseline('bottom')
						.textFont('600 11px Verdana')
						.fillText('总量',x-20,y+h+30,false,'#a8b2d7');
						
					}
			}));
			
			chart.draw();
		});
	</script>
	</head>
	<body>
		<div id='canvasDiv'></div>
		<div class='ichartjs_info'>
			<span class='ichartjs_author'>writen by <a title="示例的贡献者"
				href="mailto:taylor@ichartjs.com">taylor</a> </span>
			<span class='ichartjs_sm'>备注：</span>
			<span class='ichartjs_details'>数据均为模拟。 </span>
		</div>
	</body>
</html>

最终效果图如下：