fromhighchartsimportHighchart#导入库
H=Highchart(width=800,height=600)#设置图形的大小
#配置数据项
data1=[5,3,4,7,2]
data2=[2,2,3,2,1]
data3=[3,4,4,2,5]
options={
'chart':{
'type':'column'#图表类型
},
'title':{#主标题
'text':'带有百分比的柱状图'
},
'xAxis':{
'categories':['Apples','Oranges','Pears','Grapes','Bananas']
},
'yAxis':{
'min':0,
'title':{
'text':'Totalfruitconsumption'
}
},
'tooltip':{
'pointFormat':'<span style="color:{series.color}">{series.name}</span>:<b>{point.y}</b>({point.percentage:.0f}%)<br/>',
'shared':True
},
'legend':{
'reversed':True
},
'plotOptions':{
'series':{#将stacking参数设置成percent
'stacking':'percent'#多种取值：normal percent
}
}
}
H.set_dict_options(options)#添加配置
H.add_data_set(data1,'bar','John')
H.add_data_set(data2,'bar','Jane')
H.add_data_set(data3,'bar','Joe')
H
当我们的坐标属性过长的时候，属性值显示在坐标轴上可以倾斜一定的角度：
fromhighchartsimportHighchart#导入库
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ãoPaulo',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':'来源:<ahref="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':'Populationin2017:<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,#10pixelsdownfromthetop
#'style':{
#'fontSize':'15px',
#'fontFamily':'Verdana,sans-serif'
#}
}
}
}
}
H.set_dict_options(options)#添加配置
H.add_data_set(data,'column','Population')
H
通过最小值和最大值可以绘制在区间内变化的柱状图：
fromhighchartsimportHighchart#导入库
H=Highchart(width=800,height=600)#设置图形的大小
data_range=[
[-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:PreferusinglinkedDescriptionorcaptioninstead.
#'accessibility':{#取消了该属性
#'description':'Imagedescription'
#},
'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_range,'columnrange','Temperatures')#添加数据
H
有时候可以将多个图形放在一个画布中：
fromhighchartsimportHighchart
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':'AverageMonthlyWeatherDataforTokyo'
},
'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-LevelPressure',#纵轴标题名字设置
'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-LevelPressure',
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
