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图像地图