Highcharts快速入门及绘制柱状图

多轴柱状图

有时候可以将多个图形放在一个画布中：

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