Highcharts-7-饼图入门
本文中介绍的是如何在jupyter notebook中通过python-highcharts绘制常见的饼图：
- 基础饼图
- 带有图例的饼图
- 显示数据的饼图
- 扇形图
基础饼图
效果
动态图中显示的主要信息：
- 每个区域的名称
- 显示百分比
- 选中某个区域会从整个饼图中剥离出来
代码
代码语言：javascript复制# -*- coding: utf-8 -*-
"""
说明：绘制基础饼图
作者：Peter
"""
import datetime
from highcharts import Highchart
H = Highchart(width=850, height=400)
data = [{
'name': "Microsoft Internet Explorer", # 名称
'y': 56.33 # 数值大小
}, {
'name': "Chrome", # 某个区块的设置
'y': 24.03,
'sliced': True,
'selected': True # 在饼图中已经剥离出来
}, {
'name': "Firefox",
'y': 10.38
}, {
'name': "Safari",
'y': 4.77
}, {
'name': "Opera",
'y': 0.91
}, {
'name': "Proprietary or Undetectable",
'y': 0.2
}]
options = {
'chart': {
'plotBackgroundColor': None, # 背景色
'plotBorderWidth': None, # 边框宽度
'plotShadow': False # 外围的阴影边框是否显示
},
'title': { # 标题
'text': '浏览器市场份额占比'
},
'tooltip': { # 显示数据
'pointFormat': '{series.name}: <b>{point.percentage:.1f}%</b>'
},
}
# 添加配置项
H.set_dict_options(options)
H.add_data_set(data, # 添加名称
'pie', # 指定图表类型饼图
'Browser share', # 饼图的名称
allowPointSelect=True, # 选中扇形区域会摊出来
colorByPoint=True,
cursor='pointer', # 游标类型
)
H
显示图例的饼图
效果
在饼图中显示每个区块的图例：
代码
代码语言：javascript复制# -*- coding: utf-8 -*-
"""
说明：绘制带有图例的饼图
作者：Peter
"""
import datetime
from highcharts import Highchart
H = Highchart(width=850, height=400)
data = [{
'name': "Microsoft Internet Explorer", # 名称
'y': 56.33 # 数值大小
}, {
'name': "Chrome",
'y': 24.03,
'sliced': True,
'selected': True # 在饼图中已经剥离出来
}, {
'name': "Firefox",
'y': 10.38
}, {
'name': "Safari",
'y': 4.77
}, {
'name': "Opera",
'y': 0.91
}, {
'name': "Proprietary or Undetectable",
'y': 0.2
}]
options = {
'chart': {
'plotBackgroundColor': None,
'plotBorderWidth': None,
'plotShadow': False # 外围的阴影边框是否显示
},
'title': { # 标题
'text': '浏览器市场份额占比'
},
'tooltip': { # 显示数据
'pointFormat': '{series.name}: <b>{point.percentage:.1f}%</b>'
},
}
# 添加配置项
H.set_dict_options(options)
H.add_data_set(data, # 添加名称
'pie', # 指定图表类型饼图
'Browser share', # 饼图的名称
allowPointSelect=True, # 选中扇形区域会摊出来
cursor='pointer', # 游标类型
showInLegend=True, # 显示图例
)
H
设置图例的主要参数：
直接显示数据的饼图
效果
在整个饼图中直接将数据和百分比显示出来，整体效果如下：
代码
代码语言：javascript复制# -*- coding: utf-8 -*-
"""
说明：绘制显示数据和图例的饼图
作者：Peter
"""
import datetime
from highcharts import Highchart
H = Highchart(width=850, height=400)
data = [{
'name': "Microsoft Internet Explorer", # 名称
'y': 56.33 # 数值大小
}, {
'name': "Chrome",
'y': 24.03,
'sliced': True,
'selected': True # 在饼图中已经剥离出来
}, {
'name': "Firefox",
'y': 10.38
}, {
'name': "Safari",
'y': 4.77
}, {
'name': "Opera",
'y': 0.91
}, {
'name': "Proprietary or Undetectable",
'y': 0.2
}]
options = {
'chart': {
'plotBackgroundColor': None,
'plotBorderWidth': None,
'plotShadow': False # 外围的阴影边框是否显示
},
'title': { # 标题
'text': '浏览器市场份额占比'
},
'tooltip': { # 显示数据
'pointFormat': '{series.name}: <b>{point.percentage:.1f}%</b>'
},
}
# 添加配置项
H.set_dict_options(options)
H.add_data_set(data, # 添加名称
'pie', # 指定图表类型饼图
'Browser share', # 饼图的名称
allowPointSelect=True, # 选中扇形区域会摊出来
cursor='pointer', # 游标类型
showInLegend=True, # 显示图例
dataLabels={
'enabled': True, # 在饼图中显示数据
'format': '<b>{point.name}</b>: {point.percentage:.1f} %',
'style': {
'color': "(Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'"
}
}
)
H
数据部分设置的关键代码：
扇形图
效果
代码
代码语言：javascript复制# -*- coding: utf-8 -*-
"""
说明：绘制扇形图
作者：Peter
"""
import datetime
from highcharts import Highchart
H = Highchart(width=850, height=400)
options = {
'title': { # 标题的设置
'text': '浏览器份额占比',
'align': 'center',
'verticalAlign': 'middle',
'y': -160
},
'tooltip': { # 数据提示工具设置
'headerFormat': '{series.name}<br>',
'pointFormat': '{point.name}: <b>{point.percentage:.1f}%</b>'
},
'plotOptions': {
'pie': {
'dataLabels': {
'enabled': True,
'distance': -50,
'style': {
'fontWeight': 'bold',
'color': 'white',
'textShadow': '0px 1px 2px black'
}
},
'startAngle': -90, # 圆环的开始角度
'endAngle': 90, # 圆环的结束角度
'center': ['50%', '75%'] # 扇形图的位置
}
}
}
# 数据
data = [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2]
]
# 添加配置项
H.set_dict_options(options)
H.add_data_set(data, # 添加名称
'pie', # 指定图表类型饼图
'浏览器份额占比', # 饼图的名称
allowPointSelect=True, # 选中扇形区域会摊出来
innderSize='50%',
cursor='pointer', # 游标类型
showInLegend=True, # 显示图例
dataLabels={
'enabled': True, # 在饼图中显示数据
'format': '<b>{point.name}</b>: {point.percentage:.1f} %'
}
)
H
