IT兄弟連 HTML5教程多媒體應用 HTML圖像地圖

圖像地圖是帶有可點擊區域的圖像，通常情況下，每個區域是一個相關的超級鏈接。點擊某個區域，就會到達相關的鏈接，也可以通過圖像地圖實現圖片切換效果。

1 什么是圖像地圖

把一幅圖像分成為多個區域，每個區域指向不同的URL地址。例如，將一幅中國地圖的圖像按照省市劃分為若干個區域，這些區域就被稱為熱點，單擊熱點區域，就可以連接到與相應的省市有關的頁面，這就是圖像地圖。

2 怎么制作

1．首先必須定義出圖像上的各個熱點區域的形狀，位置坐標，及指向的URL地址等信息，這個過程叫做圖像熱點映射。圖像熱點映射需要使用<map name=mapname></map>標簽對進行說明，其中的name屬性為該圖像熱點映射指定了一個名稱。

2．圖像熱點映射中的各個區域用<area>標簽說明，<area>標簽的格式為：<area shape=”形狀”cords=”坐標”href=”URL”>，href部分也可以用nohref替換，表示在該區域單擊鼠標無效。<area>標簽還可以有一個target屬性，用來指明瀏覽器在哪個窗口或者幀中顯示href屬性所指向的網頁資源。<area>標簽的屬性及描述如表1所示。

3．定義好了圖像熱點之后，接著就要在<img>圖像標簽中增加一個名為usemap的屬性設置，usemap屬性指定該圖像被用作圖像地圖，其設置值為所使用的圖像熱點映射名稱，格式為：在<map>標簽中的name屬性設置值前多加一個“#”字符。例如，<img src=”china.jpg”usemap=”#mymap”>。

表1 <area>標簽的屬性及描述

文重點介紹的是可視化庫 Highcharts 的相關基礎知識，以及如何利用Highcharts來繪制不同場景和需求下的精美柱狀圖，主要內容包含：

Highcharts簡介
Highcharts有多強
Highcharts 4大利器
python-highcharts使用
繪制精美柱狀圖

Highcharts簡介

什么是Highcharts

首先看一段來自官網的贊美：

Make your data come alive。Highcharts makes it easy for developers to set up interactive charts in their web pages.

Highcharts 是一個用純 JavaScript 編寫的圖表庫，它能夠很簡單便捷的在 web 網站或者是 web 應用程序中添加有交互性質的圖表。

Highcharts 是免費提供給個人學習、個人網站和非商業用途的使用的。

中文官網地址：https://www.highcharts.com.cn/

Highcharts特性

Highcharts 具備諸多特性，以至于它大受歡迎：

兼容性：支持所有主流的瀏覽器和移動平臺（iOS、Android等）
多設備：支持多種設備，如手持設備、平板等
免費使用：能夠供個人免費學習使用
配置簡單：Highcharts中的數據全部配置成json格式
動態多維圖表：Highcharts中生成的圖表能夠修改，同時支持多維圖表
導出格式多樣：能夠導出PDF/PNG/JPG/SVG等多種格式
可變焦：選中圖表部分放大，能夠近距離觀察圖表

上面僅僅是列出了Highcharts的部分特性，它還有時間軸上的時間精確到毫秒、文字可在任意方向旋轉等特性。

Highcharts有多強

Highcharts 有上面列舉的諸多特性，所以它受到了國內外很多大公司的青睞，從它的官網上看到很多知名的企業，比如：Facebook、Twitter、Yahoo、IBM、阿里云等

Highcharts 4大利器

Highcharts之所以如此強大，主要是因為它有4大利器：

Highcharts
Highcharts Stock
Highcharts Maps
Highcharts Gantt

Highcharts

方便快捷的純 JavaScript 交互性圖表。可以說，Highcharts 是目前市面上最簡單靈活的圖表庫

Highcharts Stock

方便快捷地創建股票圖、大數據量的時間軸圖表。

Highstock 是用純 JavaScript 編寫的股票圖表控件，可以用來開發股票走勢圖及大數據量時間軸圖表。

Highcharts Maps

非常優秀的HTML5地圖組件，支持下鉆、觸摸、手勢等操作。

Highmaps 繼承了 Highcharts 簡單易用的特性。利用它可以方便快捷的創建用于展示銷售、選舉結果等其他與地理位置關系密切的交互地圖圖表。

Highcharts Gantt

最簡單好用的JavaScript 甘特圖庫。

方便易用的交互式甘特圖，可以用于展示時間分配、任務調度、事件及資源使用情況。

python-highcharts使用

安裝python-highcharts

開頭筆者提到過：Highcharts 是基于 JavaScript 編寫的圖表庫。

因為很多人并不是很擅長前端語言，所以有位大神編寫出來基于 Python 的第三方的庫：python-highcharts，詳細說明見github https://github.com/kyper-data/python-highcharts

安裝 python-highcharts 非常的簡單：

pip install python-highcharts

目前 python-highcharts 支持 Python2.7/3.4+，python版本需要滿足需求

使用demo

安裝好 python-highcharts 之后，我們用一個小案例來說明如何通過它繪制圖形，首先看看整體的代碼和圖形：

# 1-導入庫和實例化
from highcharts import Highchart
chart = Highchart()

# 2-配置項設置
options = {
    'chart': {
        'inverted': True  # 翻轉x軸和y軸
    },
    'title': {  # 主標題
        'text': 'Atmosphere Temperature by Altitude'
    },
    'subtitle': {  # 副標題
        'text': 'According to the Standard Atmosphere Model'
    },
    'xAxis': {  # x軸設置
        'reversed': False,
        'title': {
            'enabled': True,
            'text': 'Altitude'
        },
        'labels': {
            'formatter': 'function () {\
                return this.value + "km";\
            }'
        },
        'maxPadding': 0.05,
        'showLastLabel': True
    },
    'yAxis': {  # y軸設置
        'title': {
            'text': 'Temperature'
        },
        'labels': {
            'formatter': "function () {\
                return this.value + '°';\
            }"
        },
        'lineWidth': 2
    },
    'legend': {  # 圖例設置
        'enabled': False
    },
    'tooltip': {  # 提示工具設置
        'headerFormat': '<b>{series.name}</b><br/>',
        'pointFormat': '{point.x} km: {point.y}°C'
    }
}

# 3-實例化對象中添加配置
chart.set_dict_options(options)

# 4-繪圖所需的數據和添加數據
data =  [[0, 15], 
         [10, -50], 
         [20, -56.5], 
         [30, -46.5], 
         [40, -22.1], 
         [50, -2.5], 
         [60, -27.7], 
         [70, -55.7], 
         [80, -76.5]]
# 添加數據
chart.add_data_set(data, 'spline', 'Temperature', marker={'enabled': False}) 

# 5-在線繪圖
chart

通過上面的代碼我們可以看到使用 python-highcharts 繪圖的5個基本步驟：

導入庫和示例化對象
設置各種配置項；配置項都是字典形式
往實例化對象中添加字典形式的配置項
準備數據和往實例化對象中添加數據，并設置圖形的相關信息
notebook中在線繪圖

繪制精美柱狀圖

基礎柱狀圖

from highcharts import Highchart   # 導入庫 
H = Highchart(width=750, height=600)  # 設置圖形的大小

# 4組數據，代表4個年份
# 每組5個數據代表的是5個洲
data1 = [107, 31, 235, 203, 24]  
data2 = [133, 156, 947, 868, 106]
data3 = [373, 914, 854, 732, 34]
data4 = [652, 954, 1250, 740, 38]

# 進行配置
options = {
    'chart': {  # 加上chart配置變成水平柱狀圖
        'type': 'bar'
    },
 'title': {  # 1、主標題
        'text': 'Stacked bar chart' 
    },
    
    'subtitle': {   # 2、副標題
        'text': 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    
    'xAxis': {   # 3、橫軸的5個分類
        'categories': ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
        'title': {
            'text': "5個洲"   # x軸的名稱
        }
    },
    'yAxis': {
        'min': 0,  # 設置最小值
        'title': {
            'text': '人口數(百萬)',  # y軸名稱
            'align': 'high'
        },
        'labels': {
            'overflow': 'justify'
        }
    },
    'tooltip': {
        'valueSuffix': ' millions'
    },
    'legend': {  # 圖例設置
        'layout': 'vertical',   # 垂直方向
        'align': 'right',  # 靠右顯示
        'verticalAlign': 'top',   # 頂部
        'x': -40,
        'y': 80,
        'floating': True,
        'borderWidth': 2,    # 圖例外圍線條寬度
        'backgroundColor': "((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#9ACFF0')",#圖例背景顏色
        'shadow': True
    },
    'credits': {  # 右下角的版權標簽
        'enabled': True
    },
    'plotOptions': {
        'bar': {
            'dataLabels': {
                'enabled': True  # 顯示數據（柱狀圖頂部的數據顯示出來）
            }
        }
    }
}

H.set_dict_options(options)   # 添加配置

# 每個年份添加一組數據
H.add_data_set(data1, 'bar', 'Year 2000')
H.add_data_set(data2, 'bar', 'Year 2004')
H.add_data_set(data3, 'bar', 'Year 2008')
H.add_data_set(data4, 'bar', 'Year 2012')

H

蝴蝶柱狀圖

兩個不同類型的雙排柱狀圖：

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

# 1、數值分類區間
categories = ['0-4', '5-9', '10-14', '15-19',
              '20-24', '25-29', '30-34', '35-39', 
              '40-44','45-49', '50-54', '55-59', 
              '60-64', '65-69','70-74', '75-79', 
              '80-84', '85-89', '90-94','95-99', '100 + ']
# 2、配置項
# 在這種圖形中橫軸和縱軸需要調換
options = {
 'chart': {  #  指定圖表類型：柱狀圖
        'type': 'bar' 
    },
    'title': {  # 主標題
        'text': 'Population pyramid for Germany, midyear 2010'
    },
    'subtitle': {  # 副標題
        'text': 'Source: www.census.gov'
    },
    'xAxis': [{  # 左側標簽設置
        'categories': categories,
        'reversed': False,   # 分類區間是否翻轉
        'labels': {
            'step': 1  # 標簽區間的間隔
        }
    }, {   # 右側標簽設置
        'opposite': True,
        'reversed': False,
        'categories': categories,
        'linkedTo': 0,
        'labels': {
            'step': 1
        }
    }],
    'yAxis': {
        'title': {
            'text': None
        },
        'labels': {  # y軸標簽
            'formatter': "function () {\
                                    return (Math.abs(this.value) / 1000000) + 'M';\
                                }"
        },
        'min': -4000000,
        'max': 4000000
    },

    'plotOptions': {
        'series': {
            'stacking': 'normal'
        }
    },

    'tooltip': {
        'formatter': "function () {\
                            return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +\
                                'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);\
                        }"
    },
}

# 設置男女的數值
data_male = [-1746181, -1884428, -2089758, -2222362,
             -2537431, -2507081, -2443179, -2664537, 
             -3556505, -3680231, -3143062, -2721122, 
             -2229181, -2227768,-2176300, -1329968, 
             -836804, -354784, -90569, -28367, -3878]

data_female = [1656154, 1787564, 1981671, 2108575, 
               2403438, 2366003, 2301402, 2519874,
               3360596, 3493473, 3050775, 2759560, 
               2304444, 2426504, 2568938, 1785638,
               1447162, 1005011, 330870, 130632, 21208]

# 添加配置項
H.set_dict_options(options)

# 添加數據和指定圖表類型bar
H.add_data_set(data_male, 'bar', 'Male')
H.add_data_set(data_female, 'bar', 'Female')

H

垂直柱狀圖

from highcharts import Highchart   # 導入庫 
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'   # bar改成column
    },
    'title': {
        'text': 'Stacked column chart'
    },
    'xAxis': {
        'categories': ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    'yAxis': {
        'min': 0,
        'title': {
            'text': 'Total fruit consumption'
        },
        'stackLabels': {
            'enabled': True,
            'style': {
                'fontWeight': 'bold',
                'color': "(Highcharts.defaultOptions.title.style && \
                    Highcharts.defaultOptions.title.style.color) || 'gray'"
            }
        }
    },
    'legend': {
        'align': 'right',
        'x': -30,
        'verticalAlign': 'top',
        'y': 25,
        'floating': True,
        'backgroundColor':
            "Highcharts.defaultOptions.legend.backgroundColor || 'white'",
        'borderColor': '#CCC',
        'borderWidth': 1,
        'shadow': False
    },
    'tooltip': {
        'headerFormat': '<b>{point.x}</b><br/>',
        'pointFormat': '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    # 在這里設置堆疊的信息
    'plotOptions': {   # 將每個數據在柱狀圖上方顯示出來
        'column': {
            'stacking': 'normal',
            'dataLabels': {
                'enabled': True  # 顯示數據（柱狀圖頂部的數據顯示出來）
            }
        }
    }
}

H.set_dict_options(options)   # 添加配置

# 將之前的bar改成column即可
H.add_data_set(data1,'column','John')
H.add_data_set(data2,'column','Jane')
H.add_data_set(data3,'column','Joe')

H

水平疊加柱狀圖

from highcharts import Highchart   # 導入庫 
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': 'bar'  # 圖表類型
    },
    'title': {  # 主標題
        'text': 'Stacked bar chart'
    },
    'xAxis': {
        'categories': ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    'yAxis': {
        'min': 0,
        'title': {
            'text': 'Total fruit consumption'
        }
    },
    'legend': {
        'reversed': True
    },
    'plotOptions': {
        'series': {
            'stacking': 'normal'
        }
    }
}

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

帶有負值的柱狀圖

有時候我們的數據中還有負值，利用Highcharts同樣可以繪制柱狀圖：

from highcharts import Highchart   # 導入庫 
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': {  # 圖表類型不是bar，而是column
        'type': 'column'  
    },
    'title': {  # 主標題
        'text': 'column with negative values'
    },
    'xAxis': {
        'categories': ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    'yAxis': {
        'title': {
            'text': '水果數量',  # y軸名稱
            'align': 'high'
        },
        'labels': {
            'overflow': 'justify'
        }
    },
    'legend': {
        'reversed': True
    },
    'credits': {  # 右下角的版權信息
        'enabled': False
    },
    'plotOptions': {   # 將每個數據在柱狀圖上方顯示出來
        'bar': {
            'dataLabels': {
                'enabled': True  # 顯示數據（柱狀圖頂部的數據顯示出來）
            }
        }
    } 
}

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

帶有百分比的柱狀圖

from highcharts import Highchart   # 導入庫 
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': 'Total fruit consumption'
        }
    },
    '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

坐標屬性傾斜的柱狀圖

當我們的坐標屬性過長的時候，屬性值顯示在坐標軸上可以傾斜一定的角度：

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

基于最值的柱狀圖

通過最小值和最大值可以繪制在區間內變化的柱狀圖：

from highcharts import Highchart   # 導入庫 
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: 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_range,'columnrange','Temperatures')  # 添加數據

H

多軸柱狀圖

有時候可以將多個圖形放在一個畫布中：

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

總結

本文中我們簡單的介紹了可視化庫 Highcharts 的主要特點和4大利器，同時通過 python-highcharts 繪制了多個柱狀圖的案例，我們可以看到：

Highcharts 的確是非常的強大；如果讀者能夠很好地掌握前端語言 JavaScript，可以更加靈活地使用 Highcharts
在利用 python-highcharts 進行繪圖的過程中，步驟非常清晰（5個步驟），重點是要掌握配置項的設置
Higcharts 能夠滿足不同需求下的繪制，繪制的圖形動態效果非常明顯。

面上大多數的熱點地圖，都是以 JavaScript 來做的，但是使用 CSS3 制作的熱點地圖倒還真的挺少見的。

其實 CSS3 的功能也很強大，能幫助我們實現很多用 JavaScript 實現的效果，最近小編剛學會 HTML5 和簡單的 CSS3，在這里用 CSS3 實現了熱點地圖動畫，效果如下：

CSS3 實現熱點地圖動畫

下面給大家初步講講，如何用 CSS3 制作一個熱點地圖，你可以學到 HTML 的布局、HTML 列表、CSS 選擇器、CSS3 動畫、CSS3 的 2D 轉換等，對于練習 HTML、CSS 也有很好的幫助。

知識點

HTML 列表
CSS 相對定位與絕對定位
CSS3 動畫
CSS3 transform 屬性
CSS3 animation-delay () 屬性

相關代碼下載命令：

點擊文末閱讀原文，獲取完整代碼。

HTML 基礎結構

首先我們來創建如下目錄結構：

在 img 目錄下獲取地圖圖片，打開終端，執行以下命令：

$ cd img$ wget https://labfile.oss.aliyuncs.com/courses/2673/map_black_bg.png

在 index.html 文件中寫入如下代碼：

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>熱點地圖</title>    <!-- 引入CSS -->    <link rel="stylesheet" href="./index.css" />  </head>  <body>    <!-- 地圖 -->    <div class="china-map"></div>  </body></html>

為了讓我們的城市能夠顯示在地圖上，在這里我選擇使用 CSS 相對定位與絕對定位的方式。

在 index.css 文件中寫入如下代碼：

/* CSS 通配符 * 號，表示所有的元素一開始默認的內外邊距為 0 */* {  margin: 0;  padding: 0;}body {  /* 背景色 */  background: #31363a;}.china-map {  /* 給地圖加上相對定位 */  position: relative;  /* 給地圖設置寬高 */  width: 747px;  height: 617px;  /* 設置背景圖片，指定為不重復，并且居中 */  background: url("./map_black_bg.png") no-repeat center;  /* 將地圖設置為離頂部60px，左右居中 */  margin: 60px auto 0;}

執行如下步驟預覽效果：

這下我們的地圖就顯示出來了。

地點樣式設置

地圖成功顯示后，我們需要在上面設置地點以及地點的樣式。

在 index.html 中加入以下代碼：

<div class="china-map">  <!-- 地點區域 -->  <div class="region">    <!-- 地點顯示的小圓點 -->    <div class="dot"></div>    <!-- 向外擴散的圓圈 -->    <div class="place"></div>    <!-- 地名 -->    <div class="txt">青海</div>  </div></div>

在 index.css 中加入以下代碼：

* {  margin: 0;  padding: 0;}body {  background: #31363a;}/* 地圖 */.china-map {  position: relative;  width: 747px;  height: 617px;  background: url("./map_black_bg.png") no-repeat center;  margin: 60px auto 0;}/* 區域地點 */.region {  /* 絕對定位 */  position: absolute;}/* 小圓點 */.region .dot {  position: absolute;  top: 50%;  left: 50%;  margin: -5px 0 0 -5px;  width: 10px;  height: 10px;  background: #a2a9b4;  opacity: 1;  border-radius: 50%;}/* 向外擴散的圓圈 */.region .place {  position: absolute;  top: 50%;  left: 50%;  margin: -33px 0 0 -33px;  width: 66px;  height: 66px;  border: 2px solid #b7b7b7;  border-radius: 50%;  /* 透明度 */  opacity: 0.12;  /* 陰影 */  box-shadow: 0 0 4px #82878f inset;}/* 地名 */.region .txt {  position: absolute;  top: -20px;  left: 10px;  font-size: 14px;  color: #ccc;  width: 50px;}

預覽效果：

如何將這個地點放置在相應位置上呢？這個時候就要使用 left 屬性和 top 屬性了，通過計算正確的偏移值，將地點放置在合適的位置上。

修改 .region 的樣式：

.region {  position: absolute;  top: 302px;  left: 308px;}

預覽效果：

青海就已經顯示在正確的地方上了。但是我們轉念一想，如果我們還有一個城市，比如北京，這個時候是不是該這樣：

.region2 {  position: absolute;  top: 229px;  left: 559px;}

不過如此一來，每當創建一個城市，就要新寫一個 CSS 類，并且每一個類中都會有同樣的代碼 position:absolute，如果大篇幅的重復會增加代碼的冗余度。所以這個時候，我們可以專門新建一個類來放置每一個城市的偏移值，修改 index.css 文件，增加如下代碼：

.region {  position: absolute;}/* 青海 */.region-qh {  top: 302px;  left: 308px;}/* 北京 */.region-bj {  top: 229px;  left: 559px;}

修改 index.html：

<div class="china-map">  <!-- 青海 -->  <div class="region region-qh">    <div class="dot"></div>    <div class="place"></div>    <div class="txt">青海</div>  </div>  <!-- 北京 -->  <div class="region region-bj">    <div class="dot"></div>    <div class="place"></div>    <div class="txt">北京</div>  </div></div>

預覽效果：

同樣的道理，如果我們想設置不同地點有不同顏色的顯示，我們可以專門新建一個顏色類：

修改 index.html：

<!-- 北京 --><div class="region region-bj blue">  <div class="dot"></div>  <div class="place"></div>  <div class="txt">北京</div></div>

在 index.css 中加入以下代碼：

/* 顏色*/.region.blue .place {  width: 120px;  height: 120px;  margin: -64px 0 0 -64px;  border: 1px solid #009fd9;  box-shadow: 0 0 12px #009fd9 inset;}.region.blue .dot {  background: #0080d9;}

預覽效果：

如此一來，如果我們想給一些地點加上樣式，只需要為它加上像 .blue 這樣的顏色類就好了。現在我們將其他的地點以及樣式增加上去。

小編學習的這個《CSS3 實現熱點地圖動畫》課程，目前正在限時免費中，感興趣的小伙伴趕緊點擊了解更多，進行學習吧！

說不定做出來的地圖比小編的更好看~

點擊了解更多，學習完整課程內容～

在線咨詢

上一篇：HTML 5 - 交互
下一篇：daisyUI - 主題漂亮、代碼純凈！免費開源的 Tailwind CSS 組件庫

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

IT兄弟連 HTML5教程 多媒體應用 HTML圖像地圖

Highcharts簡介

什么是Highcharts

Highcharts特性

Highcharts有多強

Highcharts 4大利器

Highcharts

Highcharts Stock

Highcharts Maps

Highcharts Gantt

python-highcharts使用

安裝python-highcharts

使用demo

繪制精美柱狀圖

基礎柱狀圖

蝴蝶柱狀圖

垂直柱狀圖

水平疊加柱狀圖

帶有負值的柱狀圖

帶有百分比的柱狀圖

坐標屬性傾斜的柱狀圖

基于最值的柱狀圖

多軸柱狀圖

總結

知識點

HTML 基礎結構

地點樣式設置

您的項目需求

IT兄弟連 HTML5教程多媒體應用 HTML圖像地圖