Fork me on GitHub

Highcharts-10-饼图颜色设置

Posted on | In , |
Words count in article: 1.2k | Reading time ≈ 6

Highcharts-10-饼图颜色设置

本文中介绍的是饼图里颜色的设置问题，主要是：

  • 饼图区域的单一颜色
  • 饼图区域的多样颜色

单一颜色

效果

每个区块中的颜色是相同的：

代码

实现上面的效果主要是通过'color': 'Highcharts.getOptions().colors[0]方法。当colors[i]中的i取相同的值，则颜色会相同。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
# -*- 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

每个区块的颜色是不同的

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
# -*- 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

部分区域的颜色是相同的

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
# -*- 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图（甜甜圈图）

效果

甜甜圈图的颜色整体会更亮丽

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
# -*- 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

本文标题:Highcharts-10-饼图颜色设置

发布时间:2021年03月06日 - 16:03

原始链接:http://www.renpeter.cn/2021/03/06/Highcharts-10-%E9%A5%BC%E5%9B%BE%E9%A2%9C%E8%89%B2%E8%AE%BE%E7%BD%AE.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

Coffee or Tea