Highcharts-9-双饼图制作
本文中只介绍一种和饼图相关的图形：双饼图
双饼图
效果
代码
代码语言：javascript复制# -*- 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、外层数据和里层数据绘图之后颜色保持一致：
