Highcharts-8-基础饼图绘制

Highcharts-7-饼图入门

本文中介绍的是如何在jupyter notebook中通过python-highcharts绘制常见的饼图：

• 基础饼图
• 带有图例的饼图
• 显示数据的饼图
• 扇形图

基础饼图

效果

动态图中显示的主要信息：

• 每个区域的名称
• 显示百分比
• 选中某个区域会从整个饼图中剥离出来

代码

# -*- 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

显示图例的饼图

效果

在饼图中显示每个区块的图例：

代码

# -*- 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

设置图例的主要参数：

直接显示数据的饼图

效果

在整个饼图中直接将数据和百分比显示出来，整体效果如下：

代码

# -*- 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

数据部分设置的关键代码：

扇形图

效果

代码

# -*- 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