一兵多、簡(jiǎn)介
G2是阿里巴巴內(nèi)部開(kāi)放的數(shù)據(jù)可視化工具，提供豐富的圖表類(lèi)型橄仆，并且簡(jiǎn)單易上手剩膘，有比較完善的示例代碼。其生成的圖表簡(jiǎn)單漂亮盆顾，而且有JS互動(dòng)顯示怠褐，比較適合報(bào)告和文章插圖。G2的數(shù)據(jù)來(lái)源是json格式數(shù)據(jù)您宪。
G2繪制的圖形
python的pandas庫(kù)比較擅長(zhǎng)對(duì)數(shù)據(jù)處理和分析奈懒，其DataFrame生成json也很方便奠涌。pandas自身集成了matplotlib的繪圖功能，但是繪制的圖形沒(méi)有G2美觀磷杏。
pandas 繪制的圖形
二溜畅、pandas和G2結(jié)合繪圖
繪制流程如下：
- 1，pandas讀取mysql數(shù)據(jù)庫(kù)
- 2极祸，pandas對(duì)數(shù)據(jù)加工處理
- 3达皿，pandas生成json數(shù)據(jù)
- 4，創(chuàng)建含G2內(nèi)容的html贿肩，嵌入json數(shù)據(jù)
- 5峦椰，調(diào)整G2參數(shù)，并顯示
下面以具體的案例來(lái)說(shuō)明
1汰规，計(jì)算收益率排名前十的專(zhuān)家
a汤功，讀取數(shù)據(jù)
from sqlalchemy import create_engine
import pandas as pd
sql = "select * from strategy order by pct desc"
df = pd.read_sql(sql, engine)
df['pct'] = df['pct'] * 100 #收益率轉(zhuǎn)換為百分比
b，生成json數(shù)據(jù)
數(shù)據(jù)寫(xiě)到top10.json文件中
import json
datas = []
for ix, row in df[:10].iterrows():
sss = {'name': row['name'], 'pct': float(row['pct'])}
datas.append(sss)
encodejson = json.dumps(datas, ensure_ascii=False)
f = open('top10.json', 'w')
f.write(encodejson)
f.close()
c溜哮，創(chuàng)建html
從http://g2.alipay.com/demo/ 選取一個(gè)圖表模板創(chuàng)建html文件, 這里選取的是雙 Y 軸
*** top10.html ***
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>收益率排名TOP10</title>
<link rel="stylesheet" type="text/css" />
<!--如果不需要jquery ajax 則可以不引入-->
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://a.alipayobjects.com/alipay-request/3.0.3/index.js"></script>
<!-- 引入 G2 腳本 -->
<script src="https://as.alipayobjects.com/g/datavis/g2/1.2.2/index.js"></script>
</head>
<body>
<div> </div>
<div> </div>
<div> </div>
<div id="c1"></div>
<!-- G2 code start -->
<script>
$.getJSON('top10.json', function (data) {
var Frame = G2.Frame;
var frame = new Frame(data);
var chart = new G2.Chart({
id: 'c1',
width: 500,
height: 400
});
chart.source(frame, {
'pct': {alias: '年化相對(duì)收益率(%)'},
});
// 去除 X 軸標(biāo)題
chart.axis('name', {
title: null,
labels:{
'font-size':'6',
'font-weight': 'bold' //文本粗細(xì)
},
});
chart.legend(false);// 不顯示圖例
//chart.coord('rect').transpose();
chart.interval().position('name*pct').color('name'); // 繪制層疊柱狀圖
//chart.line().position('name*correct_rate').color('#5ed470').size(2).shape('smooth'); // 繪制曲線圖
//chart.point().position('name*correct_rate').color('#5ed470'); // 繪制點(diǎn)圖
chart.render();
})
</script>
<!-- G2 code end -->
</body>
</html>
top10.html文件和top10.json文件在一個(gè)文件夾內(nèi)滔金。
生成的圖表如下：
2，計(jì)算推薦次數(shù)最多的股票
a茂嗓，讀取數(shù)據(jù)
from sqlalchemy import create_engine
import pandas as pd
sql = "SELECT code FROM stock "
df = pd.read_sql(sql, engine)
b餐茵，數(shù)據(jù)處理
不同的分析師對(duì)一只股票可能有重復(fù)推薦，這就需要統(tǒng)計(jì)每只股票出現(xiàn)的次數(shù)述吸，然后讓總出現(xiàn)次數(shù)從高往低排序忿族。
用到了自然語(yǔ)言處理包nltk的FreqDist詞頻統(tǒng)計(jì)工具。
from nltk import FreqDist
codes = df['code'].get_values()
print "codes ", len(codes)
fdist = FreqDist(codes) #生成詞頻類(lèi)
fdf = pd.DataFrame(fdist.items(), columns=['code', 'count']) #轉(zhuǎn)成DataFrame
fdf.sort(columns='count', ascending=False, inplace=True) # 排序
print "fdf ", len(fdf)
c蝌矛，生成表格
創(chuàng)建html跟一個(gè)案例比較相似道批，這里我們生成markdown格式的表格。
定義一個(gè)markdown表格創(chuàng)建工具
"""
markdown 工具
"""
def m_create_table(df):
"""
從pandas的DataFrame生成markdown格式表格
:param df:
:return:
"""
if len(df) == 0:
return ''
datas = []
head = '|'.join(df.columns)
head = "|" + head + "|"
datas.append(head)
datas.append('-|-')
for ix, row in df.iterrows():
data = '|'.join(map(lambda x: str(x), row.get_values()))
data = "|" + data + "|"
datas.append(data)
result = '\n'.join(datas)
# print result
return result
調(diào)用并打印顯示
makeTable = m_create_table(fdf)
print makeTable
#輸出
|name|code|
|-|-|
|隆基股份|601012|
|美的集團(tuán)|000333|
|貴州茅臺(tái)|600519|
|華策影視|300133|
|國(guó)軒高科|002074|
|網(wǎng)宿科技|300017|
|陽(yáng)光電源|300274|
|滄州明珠|002108|
|老板電器|002508|
|保利地產(chǎn)|600048|
表格如下：
| name | code |
|---|---|
| 隆基股份 | 601012 |
| 美的集團(tuán) | 000333 |
| 貴州茅臺(tái) | 600519 |
| 華策影視 | 300133 |
| 國(guó)軒高科 | 002074 |
| 網(wǎng)宿科技 | 300017 |
| 陽(yáng)光電源 | 300274 |
| 滄州明珠 | 002108 |
| 老板電器 | 002508 |
| 保利地產(chǎn) | 600048 |
3入撒，統(tǒng)計(jì)餅圖
對(duì)于數(shù)據(jù)比較少的html隆豹，可以直接填入數(shù)據(jù)就能創(chuàng)建比較精美的圖表了。
如下茅逮，只需修改data的name和value值璃赡，就能馬上創(chuàng)建一個(gè)動(dòng)態(tài)的餅圖。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>餅圖</title>
<link rel="stylesheet" type="text/css" />
<!--如果不需要jquery ajax 則可以不引入-->
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://a.alipayobjects.com/alipay-request/3.0.3/index.js"></script>
<!-- 引入 G2 腳本 --><script src="https://as.alipayobjects.com/g/datavis/g2/1.2.6/index.js"></script>
</head>
<body>
<div id="c1"></div>
<!-- G2 code start -->
<script>
var data = [
{name: '買(mǎi)入', value: 17776 },
{name: '增持', value: 19890},
{name: '中性', value: 6814},
{name: '減持', value: 4986},
{name: '賣(mài)出', value: 494},
];
var Stat = G2.Stat;
var chart = new G2.Chart({
id: 'c1',
width: 600,
height: 400
});
chart.source(data);
// 重要：繪制餅圖時(shí)献雅，必須聲明 theta 坐標(biāo)系
chart.coord('theta', {
radius: 0.8 // 設(shè)置餅圖的大小
});
chart.legend('bottom');
chart.intervalStack()
.position(Stat.summary.percent('value'))
.color('name')
.label('name*..percent',function(name, percent){
percent = (percent * 100).toFixed(2) + '%';
return name + ' ' + percent;
});
chart.render();
// 設(shè)置默認(rèn)選中
var geom = chart.getGeoms()[0]; // 獲取所有的圖形
var items = geom.getData(); // 獲取圖形對(duì)應(yīng)的數(shù)據(jù)
geom.setSelected(items[1]); // 設(shè)置選中
</script>
<!-- G2 code end -->
</body>
</html>
Paste_Image.png
