Fork me on GitHub

Highcharts-12-绘制基础折线图

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

Highcharts-12-绘制基础折线图

本文中介绍的是如何利用python-highcharts绘制折线图

  • 指定x轴数据标签
  • 显示点值的数据
  • 显示最值和均值的折线图
  • 可缩放的X轴

指定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
from highcharts import Highchart
H = Highchart(width=850, height=400)

options = {
	'title': {
		'text': '2014 ~ 2021 年太阳能行业就业人员发展情况'
	},
	'subtitle': {
		'text': '数据来源：thesolarfoundation.com'
	},

	'yAxis': {
		'title': {
			'text': '就业人数'
		}
	},
	'legend': {
		'layout': 'vertical',
		'align': 'right',
		'verticalAlign': 'middle'
	},
	'plotOptions': {
		'series': {
			'label': {
				'connectorAllowed': False
			},
			'pointStart': 2014,
		}
 	}
}

# 添加配置项
H.set_dict_options(options)

data1 = [13934, 12503, 8177, 9658, 7031, 9931, 37133]
data2 = [24916, 24064, 29742, 29851, 32490, 30282, 38121]
data3 = [11744, 17722, 16005, 19771, 20185, 24377, 32147]
data4 = [10993,8773, 7988, 12169, 15112, 22452, 34400]
data5 = [12908, 5948, 8105, 11248, 8989, 11816, 18274]

H.add_data_set(data1, 'line', '安装/施工')
H.add_data_set(data2, 'line', '工人')
H.add_data_set(data3, 'line', '销售')
H.add_data_set(data4, 'line', '项目开发')
H.add_data_set(data5, 'line', '其他')

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
71
from highcharts import Highchart
H = Highchart(width=850, height=400)

data_Tokyo = [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
data_NY = [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
data_Berlin = [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
data_London = [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]


options = {
    'chart': {'zoomType': 'x'},
    'colors': {},
    'xAxis': {
        'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    'yAxis':{
        'title': { 'text': 'Temperature (°C)'},
        'plotLines': {
            'value': 0,
            'width': 1,
            'color': '#808080'
        }
    },
    'tooltip': {'valueSuffix': '°C'},
    'legend': {
        'layout': 'vertical',
        'align': 'right',
        'verticalAlign': 'middle',
        'borderWidth': 0
    },
    'plotOptions': {
        'line': {
                'dataLabels': {
                    # 开启数据标签，显示数据
                    'enabled': True
                },
            # 关闭鼠标跟踪，对应的提示框、点击事件会失效
            'enableMouseTracking': True
        }
    }
}

# 逐行添加配置

# H.set_options('chart', {'zoomType': 'x'})
# H.set_options('xAxis', {'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
# 	'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']})

# H.set_options('yAxis',{ 'title': { 'text': 'Temperature (°C)'},
#             'plotLines': {'value': 0, 'width': 1, 'color': '#808080'}})
# H.set_options('tooltip', {'valueSuffix': '°C'})

# H.set_options('legend', {'layout': 'vertical','align': 'right',
# 	'verticalAlign': 'middle','borderWidth': 0})
# H.set_options('colors',{})
# H.set_options('plotOptions',{'line': {
#                 'dataLabels': {
#                     'enabled': True
#                 }}})


# 添加配置项
# 添加的是自己配置字典类型的数据
H.set_dict_options(options)

H.add_data_set(data_Tokyo, 'line', 'Tokyo')
H.add_data_set(data_NY, 'line', 'New York')
H.add_data_set(data_Berlin, 'line', 'Berlin')
H.add_data_set(data_London, 'line', 'London')

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
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
from highcharts import Highchart
H = Highchart(width=750, height=600)

# 设置日期和最值
ranges = [
    [1246406400000, 14.3, 27.7],
    [1246492800000, 14.5, 27.8],
    [1246579200000, 15.5, 29.6],
    [1246665600000, 16.7, 30.7],
    [1246752000000, 16.5, 25.0],
    [1246838400000, 17.8, 25.7],
    [1246924800000, 13.5, 24.8],
    [1247011200000, 10.5, 21.4],
    [1247097600000, 9.2, 23.8],
    [1247184000000, 11.6, 21.8],
    [1247270400000, 10.7, 23.7],
    [1247356800000, 11.0, 23.3],
    [1247443200000, 11.6, 23.7],
    [1247529600000, 11.8, 20.7],
    [1247616000000, 12.6, 22.4],
    [1247702400000, 13.6, 19.6],
    [1247788800000, 11.4, 22.6],
    [1247875200000, 13.2, 25.0],
    [1247961600000, 14.2, 21.6],
    [1248048000000, 13.1, 17.1],
    [1248134400000, 12.2, 15.5],
    [1248220800000, 12.0, 20.8],
    [1248307200000, 12.0, 17.1],
    [1248393600000, 12.7, 18.3],
    [1248480000000, 12.4, 19.4],
    [1248566400000, 12.6, 19.9],
    [1248652800000, 11.9, 20.2],
    [1248739200000, 11.0, 19.3],
    [1248825600000, 10.8, 17.8],
    [1248912000000, 11.8, 18.5],
    [1248998400000, 10.8, 16.1]
]

# 日期和均值
averages = [
    [1246406400000, 21.5],
    [1246492800000, 22.1],
    [1246579200000, 23],
    [1246665600000, 23.8],
    [1246752000000, 21.4],
    [1246838400000, 21.3],
    [1246924800000, 18.3],
    [1247011200000, 15.4],
    [1247097600000, 16.4],
    [1247184000000, 17.7],
    [1247270400000, 17.5],
    [1247356800000, 17.6],
    [1247443200000, 17.7],
    [1247529600000, 16.8],
    [1247616000000, 17.7],
    [1247702400000, 16.3],
    [1247788800000, 17.8],
    [1247875200000, 18.1],
    [1247961600000, 17.2],
    [1248048000000, 14.4],
    [1248134400000, 13.7],
    [1248220800000, 15.7],
    [1248307200000, 14.6],
    [1248393600000, 15.3],
    [1248480000000, 15.3],
    [1248566400000, 15.8],
    [1248652800000, 15.2],
    [1248739200000, 14.8],
    [1248825600000, 14.4],
    [1248912000000, 15],
    [1248998400000, 13.6]
        ]

options = {
    'title': {
        'text': '8月份天气变化趋势'
    },
    'xAxis': {
        'type': '时间'
    },
    'yAxis': {
        'title': {
            'text': None
        }
    },
    'tooltip': {
        'crosshairs': True,
        'shared': True,
        'valueSuffix': '°C'
    },
    'legend': {
    }
}

H.set_dict_options(options)

H.add_data_set(averages,
               'line',
               'Temperature',
               zIndex=1,
               marker={
                'fillColor': 'white',
                'lineWidth': 2,
                'lineColor': 'Highcharts.getOptions().colors[0]'  # 颜色设置
            })

H.add_data_set(ranges,
               'arearange',
               'Range',
               lineWidth=0,
               linkedTo=':previous',
               color='Highcharts.getOptions().colors[8]',
               fillOpacity=0.3,
               zIndex=0 )

H

可缩放的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
import datetime
from highcharts import Highchart

H = Highchart()

H.set_options('chart', {'zoomType': 'x'})  # 设置可缩放
H.set_options('xAxis', {'type': 'datetime',
            'minRange': 14 * 24 * 360000})

H.set_options('yAxis',{ 'title': { 'text': 'Exchange rate'}})
H.set_options('title', {'text': 'USD to EUR exchange rate from 2006 through 2008'})
H.set_options('legend', {'enabled': False})


# 长度1096，几乎刚好是3年（2006，2007，2008）
data =  [0.8446, 0.8445, 0.8444, 0.8232, ..., 0.7095
]   

H.add_data_set(data, 'area', 'USD to EUR', pointInterval=24 * 3600 * 100, 
	pointStart=datetime.datetime(2006,1,1))
H.set_options('plotOptions', {
            'area': {
                'fillColor': {
                    'linearGradient': { 'x1': 0, 'y1': 0, 'x2': 0, 'y2': 1},
                    'stops': [
                        [0, "Highcharts.getOptions().colors[0]"],
                        [1, "Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')"]
                    ]},
                'marker': {
                    'radius': 2
                },
                'lineWidth': 1,
                'states': {
                    'hover': {
                        'lineWidth': 1
                    }
                },
                'threshold': None
            }
        })

H

本文标题:Highcharts-12-绘制基础折线图

发布时间:2021年03月19日 - 14:03

原始链接:http://www.renpeter.cn/2021/03/19/Highcharts-12-%E7%BB%98%E5%88%B6%E5%9F%BA%E7%A1%80%E6%8A%98%E7%BA%BF%E5%9B%BE.html

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

Coffee or Tea