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的介绍已经超出本书范围了，感兴趣的朋友可以自行去官网查阅。

上一章目录下一章