4.3 python-highcharts
我们在研究金融数据的时候，最常用的功能就是K线图了。可能有人会问，现在有很多行情软件都提供了K线图，为什么还需要自己绘制呢？
原因很简单，如果你只是使用MACD、MA这种内置的或者简单计算的指标，那么只用第三方平台就可以进行研究了。但是有很多指标，需要非常复杂的计算，计算完之后，还需要将其可视化以便进行观察，对于这种需求，第三方平台就没法做到了，必须要自己绘图。对于十年左右的金融数据，用Excel表格或者其他的静态图完全无法表达，如何才能将十年的数据绘制到一张图上以进行观察呢？这种情况就需要利用动态图了，动态图的意思就是，可以像行情软件那样放大或缩小区间，来回滚动，这样观察长时间的序列就非常容易了。
虽然Python的Matplotlib和seaborn的功能都很强大，但实际上，最好的可视化工具并不在Python社区中，而是在JavaScript社区中。基于网站开发的强烈需求，JavaScript中出现了大量优秀的可视化工具，比如highcharts。highcharts可以绘制很多动态的可视化图形，进行数据可视化研究非常方便。
一个典型的highcharts图链接如下：https://www.highcharts.com/stock/demo/intraday-candlestick。
打开之后，图形大概如图4-9所示。
图 4-9
在图4-9中，我们可以使用右下角的时间窗口控件对时间范围进行调节，既可以缩小或扩大显示的数据量，也可以来回拖动以显示不同的时间周期。这对于样本数量很大的数据可视化来说非常有帮助。
不过，这些可视化工具都需要使用JavaScript语言作为接口进行调用。那么Python应该如何调用呢？这就要再次归功于Python强大的社区，现在已经有一个非常好的开源项目，可以用于调用highcharts。
这个项目的链接地址如下：https://github.com/kyper-data/python-highcharts/blob/master/examples/highstock/candlestick-and-volume.py。
关于如何安装这里不再多说。我们来看几个例子。绘制带成交量的K线图是一个最常见的需求。示例代码如下：
# -*- coding: utf-8 -*-
"""
Highstock Demos
Two panes, candlestick and volume: http://www.highcharts.com/stock/demo/candlestick-
and-volume
"""
from highcharts import Highstock
from highcharts.highstock.highstock_helper import jsonp_loader
H = Highstock()
data_url = 'http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.
json&callback=?'
data = jsonp_loader(data_url, sub_d = r'(\/\*.*\*\/)')
ohlc = []
volume = []
groupingUnits = [
['week', [1]],
['month', [1, 2, 3, 4, 6]]
]
for i in range(len(data)):
ohlc.append(
[
data[i][0], # the date
data[i][1], # open
data[i][2], # high
data[i][3], # low
data[i][4] # close
]
)
volume.append(
[
data[i][0], # the date
data[i][5] # the volume
]
)
options = {
'rangeSelector': {
'selected': 1
},
'title': {
'text': 'AAPL Historical'
},
'yAxis': [{
'labels': {
'align': 'right',
'x': -3
},
'title': {
'text': 'OHLC'
},
'height': '60%',
'lineWidth': 2
}, {
'labels': {
'align': 'right',
'x': -3
},
'title': {
'text': 'Volume'
},
'top': '65%',
'height': '35%',
'offset': 0,
'lineWidth': 2
}],
}
H.add_data_set(ohlc, 'candlestick', 'AAPL', dataGrouping = {
'units': groupingUnits
}
)
H.add_data_set(volume, 'column', 'Volume', yAxis = 1, dataGrouping = {
'units': groupingUnits
}
)
H.set_dict_options(options)
H.save_file('highcharts')
H
需要注意的是，这个最终显示还是靠JavaScript，所以只能在Jupyter Notebook中显示，在Spyder中是无法显示的。当我们生成好图对象H后，想要将其显示在Notebook中，只需要输入H，运行即可，如图4-10所示。我们也可以使用H.save_file(file_path)将图像保存为html文件。这个文件可以分享给其他人，使用普通浏览器就能打开。
图 4-10
除了K线图，highcharts中的其他图形也非常丰富，比如雷达图，示例代码如下：
# -*- coding: utf-8 -*-
"""
Highcharts Demos
Spiderweb: http://www.highcharts.com/demo/polar-spider
"""
from highcharts import Highchart
H = Highchart(width=550, height=400)
options = {
'chart': {
'polar': True,
'type': 'line',
'renderTo': 'test'
},
'title': {
'text': 'Budget vs spending',
'x': -80
},
'pane': {
'size': '80%'
},
'xAxis': {
'categories': ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
'tickmarkPlacement': 'on',
'lineWidth': 0
},
'yAxis': {
'gridLineInterpolation': 'polygon',
'lineWidth': 0,
'min': 0
},
'tooltip': {
'shared': True,
'pointFormat': '<span style="color:{series.color}">{series.name}: <b>${point.
y:,.0f}</b><br/>'
},
'legend': {
'align': 'right',
'verticalAlign': 'top',
'y': 70,
'layout': 'vertical'
},
}
data1 = [43000, 19000, 60000, 35000, 17000, 10000]
data2 = [50000, 39000, 42000, 31000, 26000, 14000]
H.set_dict_options(options)
H.add_data_set(data1, name='Allocated Budget', pointPlacement='on')
H.add_data_set(data2, name='Actual Spending', pointPlacement='on')
H
运行结果如图4-11所示。
图 4-11
不过需要注意的是，由于这里只封装了JavaScript的接口，所以实际在画图的时候，所有的设置都是按照highcharts自身的语言规范来设计的，因此如果想要自己调整，那么还是需要对highcharts有一定的了解才可以。highcharts的介绍已经超出本书范围了，感兴趣的朋友可以自行去官网查阅。