Highcharts-12-绘制基础折线图
本文中介绍的是如何利用python-highcharts绘制折线图
- 指定x轴数据标签
- 显示点值的数据
- 显示最值和均值的折线图
- 可缩放的X轴
指定x轴数据标签
效果
代码
代码语言：javascript复制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显示点值的数据
效果
代码
代码语言：javascript复制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重点配置的部分：
显示最值和均值的折线图
比如我们想绘制一个月中最大值和最小值以及相应均值的天气气温折线图
效果
代码
代码语言：javascript复制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轴
特别适合做和时间相关的图形
效果
代码
代码语言：javascript复制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
