Highcharts-5-柱状图3
本文中介绍的是3种柱状图相关设置：
- x轴属性倾斜设置
- 区间变化柱状图（温度为例）
- 多轴图形
highcharts保存文件
代码语言：javascript复制H.save_file('highcharts') # save result as .html file with input name (and location path)属性倾斜的柱状图
效果
看看最终的显示效果：x轴上面的标签属性是倾斜的
代码
- 数据要变成嵌套列表的形式
- 倾斜方向和字体的设置
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)改变设置
改变上面图形的效果：
- 柱子外面显示数据
- 向左倾斜属性数据
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
几个重要的设置项：
区间变化柱状图
当我们知道某个属性的最大值和最小值的时候，我们可以绘制基于该最值的区间变化图。
效果
先看看实际效果图：
代码
以温度的最大值和最小值为例，说明区间变化的柱状图如何设置：
代码语言：javascript复制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轴共用
- 坐标轴在左右两侧
- 折线图的实心点和虚点
- 图例的设置
代码
下面是代码完整解释，主要包含：
- 配置项的解释
- 如何绘制多轴的图形
- 如何进行添加数据
⚠️：数据添加的顺序和坐标轴的顺序必须保持一致
代码语言：javascript复制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 即可不启用提示框。
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 表示启用竖直方向准星线，三种设置方式是：
crosshairs: true // 启用竖直方向准星线
crosshairs: [true, true] // 同时启用竖直及水平准星线
crosshairs: [
{ // 设置准星线样式
width: 3, // x轴
color: 'green'
},
{ // y轴
width: 1,
color: "#006cee",
dashStyle: 'longdashdot',
zIndex: 100
}
]
