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>
最终效果图如下：
有疑问加站长微信联系（非本文作者）
