Fork me on GitHub

Highcharts-5-属性倾斜、区间变化、多轴柱状图

Posted on | In , |
Words count in article: 2.1k | Reading time ≈ 10

Highcharts-5-柱状图3

本文中介绍的是3种柱状图相关设置：

  • x轴属性倾斜设置
  • 区间变化柱状图（温度为例）
  • 多轴图形

highcharts保存文件

1
H.save_file('highcharts')    # save result as .html file with input name (and location path)

属性倾斜的柱状图

效果

看看最终的显示效果：x轴上面的标签属性是倾斜的

代码

  • 数据要变成嵌套列表的形式
  • 倾斜方向和字体的设置
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
84
85
86
87
88
89
90
91
92
from highcharts import Highchart   # 导入库
H = Highchart(width=800, height=600)  # 设置图形的大小

data = [
        ['Shanghai', 24.2],
        ['Beijing', 20.8],
        ['Karachi', 14.9],
        ['Shenzhen', 13.7],
        ['Guangzhou', 13.1],
        ['Istanbul', 12.7],
        ['Mumbai', 12.4],
        ['Moscow', 12.2],
        ['São Paulo', 12.0],
        ['Delhi', 11.7],
        ['Kinshasa', 11.5],
        ['Tianjin', 11.2],
        ['Lahore', 11.1],
        ['Jakarta', 10.6],
        ['Dongguan', 10.6],
        ['Lagos', 10.6],
        ['Bengaluru', 10.3],
        ['Seoul', 9.8],
        ['Foshan', 9.3],
        ['Tokyo', 9.3]
    ]


options = {
    'chart': {
        'type': 'column'
    },
    'title': {
        'text': '2017年度世界大城市'
    },
    'subtitle': {
        'text': '来源: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">维基百科</a>'
    },
    'xAxis': {
        'type': 'category',
        'labels': {
            'rotation': +45,   # 控制倾斜方向：+ 表示向右倾斜
            'style': {
                'fontSize': '12px',  # 字体设置
                'fontFamily': 'Verdana, sans-serif'
            }
        }
    },
    'yAxis': {
        'min': 0,
        'title': {
            'text': '人口数(百万)',
#             'rotation': -1,
#             'style': {
#                 'fontSize': '13px',
#                 'fontFamily': 'Verdana, sans-serif'
#             }
        }
    },

    'legend': {
        'enabled': False
    },

    'tooltip': {   # 当鼠标放到柱子上去的时候显示的内容
        'pointFormat': 'Population in 2017: <b>{point.y:.1f} millions</b>'
    },

    # 重要设置项
    'plotOptions': {   # 将每个数据在柱状图上方显示出来
        'column': {
            'stacking': 'normal',
            'dataLabels': {
                'enabled': True,
                'rotation': -90,
                'color': '#0FFFFF',
                'align': 'left',
                'format': '{point.y:.1f}',
                'y': 10,   # 10 pixels down from the top
                'style': {
                    'fontSize': '20px',
                    'fontFamily': 'Verdana, sans-serif'
                }
            }
        }
    }
}

H.set_dict_options(options)   # 添加配置
H.add_data_set(data,'bar','Population')
H   # 在线生成图片
# 保存成HTML文件
# H.save_file('highcharts') # save result as .html file with input name (and location path)

改变设置

改变上面图形的效果：

  • 柱子外面显示数据
  • 向左倾斜属性数据
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
84
85
86
87
88
89
90
91
92
93
94
from highcharts import Highchart   # 导入库
H = Highchart(width=800, height=600)  # 设置图形的大小

data = [
        ['Shanghai', 24.2],
        ['Beijing', 20.8],
        ['Karachi', 14.9],
        ['Shenzhen', 13.7],
        ['Guangzhou', 13.1],
        ['Istanbul', 12.7],
        ['Mumbai', 12.4],
        ['Moscow', 12.2],
        ['São Paulo', 12.0],
        ['Delhi', 11.7],
        ['Kinshasa', 11.5],
        ['Tianjin', 11.2],
        ['Lahore', 11.1],
        ['Jakarta', 10.6],
        ['Dongguan', 10.6],
        ['Lagos', 10.6],
        ['Bengaluru', 10.3],
        ['Seoul', 9.8],
        ['Foshan', 9.3],
        ['Tokyo', 9.3]
    ]


options = {
    'chart': {
        'type': 'column'
    },
    'title': {
        'text': '2017年度世界大城市'
    },
    'subtitle': {   # 带上了url地址，点击进入链接的文章中
        'text': '来源: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">维基百科</a>'
    },
    'xAxis': {
        'type': 'category',
        'labels': {
            'rotation': -45,   # 控制倾斜方向：+ 表示向右倾斜
            'style': {
                'fontSize': '12px',  # 字体设置
                'fontFamily': 'Verdana, sans-serif'
            }
        }
    },
    'yAxis': {
        'min': 0,
        'title': {
            'text': '人口数(百万)',
#             'rotation': -1,
#             'style': {
#                 'fontSize': '13px',
#                 'fontFamily': 'Verdana, sans-serif'
#             }
        }
    },

    'legend': {
        'enabled': False
    },

    'tooltip': {   # 当鼠标放到柱子上去的时候显示的内容
        'pointFormat': 'Population in 2017: <b>{point.y:.1f} millions</b>'
    },

    # 重要设置项
    'plotOptions': {   # 将每个数据在柱状图上方显示出来
        'column': {
            'stacking': 'normal',
            'dataLabels': {
                'enabled': True,
                'inside': False,
                'rotation': -1,
                'color': '#FFFFFF',
#                 'align': 'left',
                'format': '{point.y:.1f}',
                'y': 10,   # 10 pixels down from the top
#                 'style': {
#                     'fontSize': '15px',
#                     'fontFamily': 'Verdana, sans-serif'
#                 }
            }
        }
    }
}


H.set_dict_options(options)   # 添加配置

H.add_data_set(data,'column','Population')

H

几个重要的设置项：

区间变化柱状图

当我们知道某个属性的最大值和最小值的时候，我们可以绘制基于该最值的区间变化图。

效果

先看看实际效果图：

代码

以温度的最大值和最小值为例，说明区间变化的柱状图如何设置：

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
from highcharts import Highchart   # 导入库
H = Highchart(width=800, height=600)  # 设置图形的大小

data = [
        [-9.9, 10.3],
        [-8.6, 8.5],
        [-10.2, 11.8],
        [-1.7, 12.2],
        [-0.6, 23.1],
        [3.7, 25.4],
        [6.0, 26.2],
        [6.7, 21.4],
        [3.5, 19.5],
        [-1.3, 16.0],
        [-8.7, 9.4],
        [-9.0, 8.6]
        ]


options = {
    'chart': {
        'type': 'columnrange',
        'inverted': True
    },

#     # Note: Prefer using linkedDescription or caption instead.
#     'accessibility': {   # 取消了该属性
#         'description': 'Image description'
#     },

    'title': {
        'text': 'title'
    },

    'subtitle': {
        'text': 'subtitle'
    },

    'xAxis': {
        'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    'yAxis': {
        'title': {
            'text': 'Temperature ( °C )'
        }
    },

    'tooltip': {
        'valueSuffix': '°C'
    },
    'legend': {
        'enabled': False
    },
    'plotOptions': {
        'columnrange': {
            'dataLabels': {
                'enabled': True,
                'format': '{y}°C'
            }
        }
    }
}

H.set_dict_options(options)   # 添加配置

H.add_data_set(data,'columnrange','Temperatures')  # 添加数据

H

多轴柱状图

在实际的需求中，我们可能需要将多个图形放在一个画布中，并且共用一个x轴，下面👇通过Highcharts来实现这个需求

效果

看看某个城市一年的天气和下雨量的数据展示效果：

  • X轴共用
  • 坐标轴在左右两侧
  • 折线图的实心点和虚点
  • 图例的设置

代码

下面是代码完整解释，主要包含：

  • 配置项的解释
  • 如何绘制多轴的图形
  • 如何进行添加数据

⚠️：数据添加的顺序和坐标轴的顺序必须保持一致

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
from highcharts import Highchart
H = Highchart(width=850, height=400)

# 3组不同的数据：降雨量、气压、温度
data1 = [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
data2 = [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7]
data3 = [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

options = {
	'chart': {
        'zoomType': 'xy'  # xy缩放变化
    },
    'title': {  # 标题设置
        'text': 'Average Monthly Weather Data for Tokyo'
    },
    'subtitle': {
        'text': 'Source: WorldClimate.com'
    },
    'xAxis': [{  # x轴数据
        'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        'crosshair': True   # True 表示启用竖直方向的十字准星；[true, true] 启动横纵两个轴
    }],

    # y轴有3个属性设置
    'yAxis': [   # 列表中3个元素：温度、降雨量、气压
        # 1-温度
        { 'labels': {
            'format': '{value}°C',  #  温度数据的单位设置
            'style': {
                'color': 'Highcharts.getOptions().colors[2]'  # 索引为2，取出第3个图
                    }
                },
                 'title': {
                    'text': 'Temperature',  # 名字设置
                    'style': {
                        'color': 'Highcharts.getOptions().colors[2]'
                            }
                        },
                 'opposite': True  # 纵坐标默认在左边，”相反opposite“取右边的位置
        },
        # 2-降雨量
        { 'labels': {
            'format': '{value} mm',  # 单位设置
            'style': {
                'color': 'Highcharts.getOptions().colors[0]'
                    }
                },
        'gridLineWidth': 0,   # 线宽（水平方向的灰色线条）
        'title': {
            'text': 'Rainfall',   # 名字设置
            'style': {
                'color': 'Highcharts.getOptions().colors[0]'
                    }
                }
        },
        # 3-气压
        {'labels': {  # 海平面气压数据
            'format': '{value} mb',
            'style': {
                'color': 'Highcharts.getOptions().colors[1]'
                    }
                },
        'opposite': True,   # 纵坐标右侧显示
        'gridLineWidth': 0,
        'title': {
            'text': 'Sea-Level Pressure',  # 纵轴标题名字设置
            'style': {
                'color': 'Highcharts.getOptions().colors[1]'
                    }
                }
        }
    ],
    'tooltip': {   # 数据提示框，鼠标放上去显示3个坐标的数据
        'shared': True,

    },
    'legend': {
        'layout': 'vertical',  # 图例垂直显示；horizontal水平显示（并排）
        'align': 'left',  # 图例靠左
        'x': 80,  # 图例到y轴距离
        'verticalAlign': 'top',
        'y': 55,  # 图例到x轴距离
        'floating': True,  # 图例是否可以显示在图形：False表示图例和图形完全分开
        'backgroundColor': "(Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'"  # 图例背景色
    },
}
H.set_dict_options(options)

# 如何绘制多个图形
# 设置项options中3者顺序：温度（0）、降雨量（1）、气压（2）
# 添加的数据化顺序和坐标轴的顺序要保持一致

H.add_data_set(data1,  # 添加数据（降雨量）-colors[0]
               'column',  # 指定图形类型：柱状图
               'Rainfall', # 名称
               yAxis=1,
               tooltip={
                   'valueSuffix': ' mm'  # 提示数据的单位
               })

H.add_data_set(data2,  # 气压-colors[1]
               'spline',  # spline表示圆滑的曲线；line表示折线
               'Sea-Level Pressure',
               yAxis=2 ,
               marker={
                   'enabled': True   # 标记：F表示虚点；T表示实点
               },
               dashStyle='shortdot',  #  在图形中直接显示markder；设置成False则需要鼠标放上去才会出现markder点
               tooltip={
                'valueSuffix': ' mb'
               })
H.add_data_set(data3,  # 温度-colors[2]
               'spline',
               'Temperature',
               yAxis=0,
               tooltip={
                'valueSuffix': ' °C'
               })

H

数据提示框

数据提示框指的当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值、数据单位等。

数据提示框内提示的信息完全可以通过格式化函数动态指定；通过设置 tooltip.enabled = false 即可不启用提示框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
tooltip: {
    backgroundColor: '#FCFFC5',   // 背景颜色
    borderColor: 'black',         // 边框颜色
    borderRadius: 10,             // 边框圆角
    borderWidth: 3,               // 边框宽度
    shadow: true,                 // 是否显示阴影
    animation: true               // 是否启用动画效果
    style: {                      // 文字内容相关样式
        color: "#ff0000",
        fontSize: "12px",
        fontWeight: "blod",
        fontFamily: "Courir new"
    }
}

准十字星设置

crosshairs 有三种配置形式，最基础的是设置crosshairs = true 表示启用竖直方向准星线，三种设置方式是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
crosshairs: true          // 启用竖直方向准星线
crosshairs: [true, true]  // 同时启用竖直及水平准星线
crosshairs: [
    {            // 设置准星线样式
      width: 3,   // x轴
      color: 'green'
    },
    {  // y轴
      width: 1,
      color: "#006cee",
      dashStyle: 'longdashdot',
      zIndex: 100
    }
]

本文标题:Highcharts-5-属性倾斜、区间变化、多轴柱状图

发布时间:2021年02月18日 - 18:02

原始链接:http://www.renpeter.cn/2021/02/18/Highcharts-5-%E5%B1%9E%E6%80%A7%E5%80%BE%E6%96%9C%E3%80%81%E5%8C%BA%E9%97%B4%E5%8F%98%E5%8C%96%E3%80%81%E5%A4%9A%E8%BD%B4%E6%9F%B1%E7%8A%B6%E5%9B%BE.html

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

Coffee or Tea