可視化庫(kù)Highcharts-5-繪制柱狀圖3

Highcharts-5-柱狀圖3

本文中介紹的是3種柱狀圖相關(guān)設(shè)置：

  • x軸屬性傾斜設(shè)置
  • 區(qū)間變化柱狀圖（溫度為例）
  • 多軸圖形
image

highcharts保存文件

H.save_file('highcharts')    # save result as .html file with input name (and location path)

屬性傾斜的柱狀圖

效果

看看最終的顯示效果：x軸上面的標(biāo)簽屬性是傾斜的

image

代碼

  • 數(shù)據(jù)要變成嵌套列表的形式
  • 傾斜方向和字體的設(shè)置
from highcharts import Highchart   # 導(dǎo)入庫(kù) 
H = Highchart(width=800, height=600)  # 設(shè)置圖形的大小

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': '來(lái)源: <a 
    },
    'xAxis': {
        'type': 'category',
        'labels': {
            'rotation': +45,   # 控制傾斜方向：+ 表示向右傾斜
            'style': {
                'fontSize': '12px',  # 字體設(shè)置
                'fontFamily': 'Verdana, sans-serif'
            }
        }
    },
    'yAxis': {
        'min': 0,
        'title': {
            'text': '人口數(shù)(百萬(wàn))',
#             'rotation': -1,
#             'style': {
#                 'fontSize': '13px',
#                 'fontFamily': 'Verdana, sans-serif'
#             }
        }
    },
    
    'legend': {
        'enabled': False
    },
    
    'tooltip': {   # 當(dāng)鼠標(biāo)放到柱子上去的時(shí)候顯示的內(nèi)容
        'pointFormat': 'Population in 2017: <b>{point.y:.1f} millions</b>'
    },
    
    # 重要設(shè)置項(xiàng)
    'plotOptions': {   # 將每個(gè)數(shù)據(jù)在柱狀圖上方顯示出來(lái)
        '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)

改變?cè)O(shè)置

改變上面圖形的效果：

  • 柱子外面顯示數(shù)據(jù)
  • 向左傾斜屬性數(shù)據(jù)
from highcharts import Highchart   # 導(dǎo)入庫(kù) 
H = Highchart(width=800, height=600)  # 設(shè)置圖形的大小

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地址，點(diǎn)擊進(jìn)入鏈接的文章中
        'text': '來(lái)源: <a 
    },
    'xAxis': {
        'type': 'category',
        'labels': {
            'rotation': -45,   # 控制傾斜方向：+ 表示向右傾斜
            'style': {
                'fontSize': '12px',  # 字體設(shè)置
                'fontFamily': 'Verdana, sans-serif'
            }
        }
    },
    'yAxis': {
        'min': 0,
        'title': {
            'text': '人口數(shù)(百萬(wàn))',
#             'rotation': -1,
#             'style': {
#                 'fontSize': '13px',
#                 'fontFamily': 'Verdana, sans-serif'
#             }
        }
    },
    
    'legend': {
        'enabled': False
    },
    
    'tooltip': {   # 當(dāng)鼠標(biāo)放到柱子上去的時(shí)候顯示的內(nèi)容
        'pointFormat': 'Population in 2017: <b>{point.y:.1f} millions</b>'
    },
    
    # 重要設(shè)置項(xiàng)
    'plotOptions': {   # 將每個(gè)數(shù)據(jù)在柱狀圖上方顯示出來(lái)
        '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
image

幾個(gè)重要的設(shè)置項(xiàng)：

image
image
image
image

區(qū)間變化柱狀圖

當(dāng)我們知道某個(gè)屬性的最大值和最小值的時(shí)候，我們可以繪制基于該最值的區(qū)間變化圖。

效果

先看看實(shí)際效果圖：

image

代碼

以溫度的最大值和最小值為例，說(shuō)明區(qū)間變化的柱狀圖如何設(shè)置：

from highcharts import Highchart   # 導(dǎo)入庫(kù) 
H = Highchart(width=800, height=600)  # 設(shè)置圖形的大小

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')  # 添加數(shù)據(jù)

H
image
image

多軸柱狀圖

在實(shí)際的需求中，我們可能需要將多個(gè)圖形放在一個(gè)畫(huà)布中，并且共用一個(gè)x軸，下面??通過(guò)Highcharts來(lái)實(shí)現(xiàn)這個(gè)需求

效果

看看某個(gè)城市一年的天氣和下雨量的數(shù)據(jù)展示效果：

  • X軸共用
  • 坐標(biāo)軸在左右兩側(cè)
  • 折線圖的實(shí)心點(diǎn)和虛點(diǎn)
  • 圖例的設(shè)置
image

代碼

下面是代碼完整解釋?zhuān)饕?/p>

  • 配置項(xiàng)的解釋
  • 如何繪制多軸的圖形
  • 如何進(jìn)行添加數(shù)據(jù)

??：數(shù)據(jù)添加的順序和坐標(biāo)軸的順序必須保持一致

from highcharts import Highchart
H = Highchart(width=850, height=400)

# 3組不同的數(shù)據(jù)：降雨量、氣壓、溫度
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': {  # 標(biāo)題設(shè)置
        'text': 'Average Monthly Weather Data for Tokyo'
    },
    'subtitle': {
        'text': 'Source: WorldClimate.com'
    },
    'xAxis': [{  # x軸數(shù)據(jù)
        'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        'crosshair': True   # True 表示啟用豎直方向的十字準(zhǔn)星；[true, true] 啟動(dòng)橫縱兩個(gè)軸
    }],
    
    # y軸有3個(gè)屬性設(shè)置
    'yAxis': [   # 列表中3個(gè)元素：溫度、降雨量、氣壓
        # 1-溫度
        { 'labels': {
            'format': '{value}°C',  #  溫度數(shù)據(jù)的單位設(shè)置
            'style': {
                'color': 'Highcharts.getOptions().colors[2]'  # 索引為2，取出第3個(gè)圖
                    }
                },
                 'title': {
                    'text': 'Temperature',  # 名字設(shè)置
                    'style': {
                        'color': 'Highcharts.getOptions().colors[2]'
                            }
                        },
                 'opposite': True  # 縱坐標(biāo)默認(rèn)在左邊，”相反opposite“取右邊的位置
        },   
        # 2-降雨量
        { 'labels': {  
            'format': '{value} mm',  # 單位設(shè)置
            'style': {
                'color': 'Highcharts.getOptions().colors[0]'
                    }
                },
        'gridLineWidth': 0,   # 線寬（水平方向的灰色線條）
        'title': {
            'text': 'Rainfall',   # 名字設(shè)置
            'style': {
                'color': 'Highcharts.getOptions().colors[0]'
                    }
                }
        },
        # 3-氣壓
        {'labels': {  # 海平面氣壓數(shù)據(jù)
            'format': '{value} mb',
            'style': {
                'color': 'Highcharts.getOptions().colors[1]'
                    }
                },
        'opposite': True,   # 縱坐標(biāo)右側(cè)顯示
        'gridLineWidth': 0,
        'title': {
            'text': 'Sea-Level Pressure',  # 縱軸標(biāo)題名字設(shè)置
            'style': {
                'color': 'Highcharts.getOptions().colors[1]'
                    }
                }
        }
    ],
    'tooltip': {   # 數(shù)據(jù)提示框，鼠標(biāo)放上去顯示3個(gè)坐標(biāo)的數(shù)據(jù)
        'shared': True,
        
    },
    'legend': {
        'layout': 'vertical',  # 圖例垂直顯示；horizontal水平顯示（并排）
        'align': 'left',  # 圖例靠左
        'x': 80,  # 圖例到y(tǒng)軸距離
        'verticalAlign': 'top',
        'y': 55,  # 圖例到x軸距離
        'floating': True,  # 圖例是否可以顯示在圖形：False表示圖例和圖形完全分開(kāi)
        'backgroundColor': "(Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'"  # 圖例背景色
    },
}
H.set_dict_options(options)

# 如何繪制多個(gè)圖形
# 設(shè)置項(xiàng)options中3者順序：溫度（0）、降雨量（1）、氣壓（2）
# 添加的數(shù)據(jù)化順序和坐標(biāo)軸的順序要保持一致

H.add_data_set(data1,  # 添加數(shù)據(jù)（降雨量）-colors[0]
               'column',  # 指定圖形類(lèi)型：柱狀圖
               'Rainfall', # 名稱
               yAxis=1, 
               tooltip={
                   'valueSuffix': ' mm'  # 提示數(shù)據(jù)的單位
               })

H.add_data_set(data2,  # 氣壓-colors[1]
               'spline',  # spline表示圓滑的曲線；line表示折線
               'Sea-Level Pressure', 
               yAxis=2 ,
               marker={
                   'enabled': True   # 標(biāo)記：F表示虛點(diǎn)；T表示實(shí)點(diǎn)
               },
               dashStyle='shortdot',  #  在圖形中直接顯示markder；設(shè)置成False則需要鼠標(biāo)放上去才會(huì)出現(xiàn)markder點(diǎn)
               tooltip={
                'valueSuffix': ' mb'  
               })
H.add_data_set(data3,  # 溫度-colors[2]
               'spline', 
               'Temperature',
               yAxis=0,
               tooltip={
                'valueSuffix': ' °C'
               })

H
image

數(shù)據(jù)提示框

數(shù)據(jù)提示框指的當(dāng)鼠標(biāo)懸停在某點(diǎn)上時(shí)，以框的形式提示該點(diǎn)的數(shù)據(jù)，比如該點(diǎn)的值、數(shù)據(jù)單位等。

數(shù)據(jù)提示框內(nèi)提示的信息完全可以通過(guò)格式化函數(shù)動(dòng)態(tài)指定；通過(guò)設(shè)置 tooltip.enabled = false 即可不啟用提示框。

tooltip: {
    backgroundColor: '#FCFFC5',   // 背景顏色
    borderColor: 'black',         // 邊框顏色
    borderRadius: 10,             // 邊框圓角
    borderWidth: 3,               // 邊框?qū)挾?    shadow: true,                 // 是否顯示陰影
    animation: true               // 是否啟用動(dòng)畫(huà)效果
    style: {                      // 文字內(nèi)容相關(guān)樣式
        color: "#ff0000",
        fontSize: "12px",
        fontWeight: "blod",
        fontFamily: "Courir new"
    }
}
image

準(zhǔn)十字星設(shè)置

crosshairs 有三種配置形式，最基礎(chǔ)的是設(shè)置crosshairs = true 表示啟用豎直方向準(zhǔn)星線，三種設(shè)置方式是：

crosshairs: true          // 啟用豎直方向準(zhǔn)星線
crosshairs: [true, true]  // 同時(shí)啟用豎直及水平準(zhǔn)星線
crosshairs: [
    {            // 設(shè)置準(zhǔn)星線樣式
      width: 3,   // x軸
      color: 'green'
    }, 
    {  // y軸
      width: 1,
      color: "#006cee",
      dashStyle: 'longdashdot',
      zIndex: 100 
    }
]
image
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容