Highcharts-9-双饼图绘制

Highcharts-9-双饼图制作

本文中只介绍一种和饼图相关的图形：双饼图

双饼图

效果

代码

# -*- coding: utf-8 -*-
"""
说明：制作双饼图
作者：Peter
"""
# 导入库
from highcharts import Highchart
# 实例化
H = Highchart(width = 850, height = 400)

# 数据部分：第一层数据+下钻后的数据，需要指定数据大小、名称、颜色
data = [{
            'y': 55.11,  # 第一层百分比
            'color': 'Highcharts.getOptions().colors[0]',  # 颜色的获取
            'drilldown': {
                'name': 'MSIE versions',  # 下钻名称
                'categories': ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],  # 下钻之后的类别
                'data': [10.85, 7.35, 33.06, 3.85],  # 下钻数据大小
                'color': 'Highcharts.getOptions().colors[0]'
            }
        }, {
            'y': 21.63,
            'color': 'Highcharts.getOptions().colors[1]',
            'drilldown': {
                'name': 'Firefox versions',
                'categories': ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
                'data': [0.20, 0.83, 1.58, 13.12, 5.9],
                'color': 'Highcharts.getOptions().colors[1]'
            }
        }, {
            'y': 11.94,
            'color': 'Highcharts.getOptions().colors[2]',
            'drilldown': {
                'name': 'Chrome versions',
                'categories': ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
                    'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
                'data': [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.42],
                'color': 'Highcharts.getOptions().colors[2]'
            }
        }, {
            'y': 7.15,
            'color': 'Highcharts.getOptions().colors[3]',
            'drilldown': {
                'name': 'Safari versions',
                'categories': ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                    'Safari 3.1', 'Safari 4.1'],
                'data': [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.35],
                'color': 'Highcharts.getOptions().colors[3]'
            }
        }, {
            'y': 2.14,
            'color': 'Highcharts.getOptions().colors[4]',
            'drilldown': {
                'name': 'Opera versions',
                'categories': ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
                'data': [ 0.12, 0.37, 1.65],
                'color': 'Highcharts.getOptions().colors[4]'
            }
        }]

options = {
	'chart': {  # 图表类型：饼图
        'type': 'pie'
    },
    'title': { # 标题设置
        'text': 'Browser market share, April, 2011'
    },
    'yAxis': {  # y轴标题
        'title': {
            'text': 'Total percent market share'
        }
    },
    'plotOptions': {
        'pie': {
            'shadow': False,  # 是否显示阴影
            'center': ['50%', '50%']
        }
    },
    'tooltip': {
        'valueSuffix': '%'  # 数据提示框中数据的后缀%
    },
}


categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera']
browserData = []
versionsData = []

for i in range(len(data)):

    browserData.append({  # 对第一层数据进行设置，存放到列表中
        'name': categories[i],
        'y': data[i]['y'],
        'color': data[i]['color']
        })

    drillDataLen = len(data[i]['drilldown']['data'])
    for j in range(drillDataLen):  # 下钻后数据的设置

        brightness = 0.2 - (j / drillDataLen) / 5;
        versionsData.append({
            'name': data[i]['drilldown']['categories'][j],
            'y': data[i]['drilldown']['data'][j],
            'color': 'Highcharts.Color(' + data[i]['color'] + ').brighten(' + str(brightness) + ').get()'
        })

H.set_dict_options(options)

# 第一层数据的添加和设置
H.add_data_set(browserData,  # 数据
               'pie',  # 类型
               'Browsers',  # 名称
               size='60%', # 所占比例
            dataLabels={  # 数据标签设置
                'formatter': 'function () { \
                                    return this.y > 5 ? this.point.name : null;\
                                }',
                'color': 'white',
                'distance': -30
            })

# 第二层数据的添加和设置
H.add_data_set(versionsData,
               'pie',
               'Versions',
               size='80%',
            innerSize='60%',  # 内圈的大小
            dataLabels={
                'formatter': "function () {\
                                    return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%'  : null;\
                                }"
            })

H

具体过程

1、设置最里层（第一层）的数据

2、设置第二层的数据，相加之后等于其所属的第一层数据

3、外层数据和里层数据绘图之后颜色保持一致：