Highcharts-10-饼图颜色设置
本文中介绍的是饼图里颜色的设置问题，主要是：
- 饼图区域的单一颜色
- 饼图区域的多样颜色
单一颜色
效果
每个区块中的颜色是相同的：
代码
实现上面的效果主要是通过'color': 'Highcharts.getOptions().colors[0]方法。当colors[i]中的i取相同的值，则颜色会相同。
# -*- coding: utf-8 -*-
"""
说明：绘制单色饼图
作者：Peter
"""
import datetime
from highcharts import Highchart
H = Highchart(width=850, height=400)
data = [
{'name':'Firefox', # 名称设置
'y': 45.0, # 具体设置
'color': 'Highcharts.getOptions().colors[0]', # 颜色获取，全部用0号颜色则最终图形的颜色是一致的
},
{'name':'IE',
'y':26.8,
'color': 'Highcharts.getOptions().colors[0]',
},
{'name': 'Chrome',
'y': 12.8,
'color': 'Highcharts.getOptions().colors[0]',
'sliced': True,
'selected': True},
{'name':'Safari',
'y': 8.5,
'color': 'Highcharts.getOptions().colors[0]',
},
{'name':'Opera',
'y': 6.2,
'color': 'Highcharts.getOptions().colors[0]',
},
{'name':'其他',
'y': 0.7,
'color': 'Highcharts.getOptions().colors[0]',
}
]
# 配置项
options = { # 主标题
'title': {
'text': '2014 年某网站各浏览器访问量占比'
},
'tooltip': {
'pointFormat': '{series.name}: <b>{point.percentage:.1f}%</b>'
},
'plotOptions': {
'pie': {
'allowPointSelect': True,
'cursor': 'pointer',
'dataLabels': {
'enabled': True,
'format': '<b>{point.name}</b>: {point.percentage:.1f} %',
'style': {
'color': "(Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'"
}
}
}
}
}
# 对颜色的单独设置
categories = ['Firefox','IE','Chrome','Safari','Opera','其他']
colors = []
for i in range(len(data)):
colors.append({
'name': categories[i],
'y': data[i]['y'],
'color': data[i]['color']
})
# 添加设置
H.set_dict_options(options)
# 添加数据、图形类别、名称
H.add_data_set(data, 'pie', "浏览器占比")
H
核心代码的位置：
不同颜色
效果1
每个区块的颜色是不同的
代码
代码语言：javascript复制# -*- coding: utf-8 -*-
"""
说明：绘制单色饼图
作者：Peter
"""
import datetime
from highcharts import Highchart
H = Highchart(width=850, height=400)
data = [
{'name':'Firefox', # 名称设置
'y': 45.0, # 具体设置
'color': 'Highcharts.getOptions().colors[0]', # 颜色获取，全部用0号颜色则最终图形的颜色是一致的
},
{'name':'IE',
'y':26.8,
'color': 'Highcharts.getOptions().colors[1]',
},
{'name': 'Chrome',
'y': 12.8,
'color': 'Highcharts.getOptions().colors[2]',
'sliced': True,
'selected': True},
{'name':'Safari',
'y': 8.5,
'color': 'Highcharts.getOptions().colors[3]',
},
{'name':'Opera',
'y': 6.2,
'color': 'Highcharts.getOptions().colors[4]',
},
{'name':'其他',
'y': 0.7,
'color': 'Highcharts.getOptions().colors[6]',
}
]
# 配置项
options = {
'title': {
'text': '2014 年某网站各浏览器访问量占比'
},
'tooltip': {
'pointFormat': '{series.name}: <b>{point.percentage:.1f}%</b>'
},
'plotOptions': {
'pie': {
'allowPointSelect': True,
'cursor': 'pointer',
'dataLabels': {
'enabled': True,
'format': '<b>{point.name}</b>: {point.percentage:.1f} %',
'style': {
'color': "(Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'"
}
}
}
}
}
# 对颜色的单独设置
categories = ['Firefox','IE','Chrome','Safari','Opera','其他']
colors = []
for i in range(len(data)):
colors.append({
'name': categories[i],
'y': data[i]['y'],
'color': data[i]['color']
})
# 添加设置
H.set_dict_options(options)
# 添加数据、图形类别、名称
H.add_data_set(data, 'pie', "浏览器占比")
H
核心代码如下：
效果2
部分区域的颜色是相同的
代码
代码语言：javascript复制# -*- coding: utf-8 -*-
"""
说明：绘制多色饼图
作者：Peter
"""
import datetime
from highcharts import Highchart
H = Highchart(width=850, height=400)
data = [
{'name':'Firefox', # 名称设置
'y': 45.0, # 具体设置
'color': 'Highcharts.getOptions().colors[0]', # 颜色获取，全部用0号颜色则最终图形的颜色是一致的
},
{'name':'IE',
'y':26.8,
'color': 'Highcharts.getOptions().colors[0]',
},
{'name': 'Chrome',
'y': 12.8,
'color': 'Highcharts.getOptions().colors[1]',
'sliced': True,
'selected': True},
{'name':'Safari',
'y': 8.5,
'color': 'Highcharts.getOptions().colors[1]',
},
{'name':'Opera',
'y': 6.2,
'color': 'Highcharts.getOptions().colors[2]',
},
{'name':'其他',
'y': 0.7,
'color': 'Highcharts.getOptions().colors[2]',
}
]
# 配置项
options = { # 主标题
'title': {
'text': '2014 年某网站各浏览器访问量占比'
},
'tooltip': {
'pointFormat': '{series.name}: <b>{point.percentage:.1f}%</b>'
},
'plotOptions': {
'pie': {
'allowPointSelect': True,
'cursor': 'pointer',
'dataLabels': {
'enabled': True,
'format': '<b>{point.name}</b>: {point.percentage:.1f} %',
'style': {
'color': "(Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'"
}
}
}
}
}
# 对颜色的单独设置
categories = ['Firefox','IE','Chrome','Safari','Opera','其他']
colors = []
for i in range(len(data)):
colors.append({
'name': categories[i],
'y': data[i]['y'],
'color': data[i]['color']
})
# 添加设置
H.set_dict_options(options)
# 添加数据、图形类别、名称
H.add_data_set(data, 'pie', "浏览器占比")
H
3D dount图（甜甜圈图）
效果
甜甜圈图的颜色整体会更亮丽
代码
代码语言：javascript复制# -*- coding: utf-8 -*-
"""
Highcharts Demos
3D donut: http://www.highcharts.com/demo/3d-pie-donut
"""
# 导入库和实例化
from highcharts import Highchart
H = Highchart(width=550, height=400)
options = {
'chart': { # 设置图表类型
'type': 'pie',
'options3d': { # 开启3d效果
'enabled': True,
'alpha': 45
}
},
'title': { # 主标题
'text': "Contents of Highsoft's weekly fruit delivery"
},
'subtitle': { # 副标题
'text': '3D donut in Highcharts'
},
'plotOptions': {
'pie': { # 饼图大小和深度
'innerSize': 100,
'depth': 45
}
},
}
# 准备数据
data = [
['Bananas', 8],
['Kiwi', 3],
['Mixed nuts', 1],
['Oranges', 6],
['Apples', 8],
['Pears', 4],
['Clementines', 4],
['Reddish (bag)', 1],
['Grapes (bunch)', 1]
]
# 添加设置
H.set_dict_options(options)
# 添加数据、图形类别、名称
H.add_data_set(data, 'pie', 'Delivered amount')
H
