Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型
Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型
认识Highmaps
Highmaps是Highcharts的姊妹框架,用来实现地图图表。它完全使用Javascript编写实现。其结构清晰,使用简单。开发人员可以很轻松地构建出常见的各种地图图表类型。本章将简要介绍Highmaps的特点,并实现第一个Highmaps地图应用。
Highmaps概述
为了更好学习Highmaps的使用,我们首先了解如何获取Highmaps插件和Highmaps所支持的图表类型。
下载Highmaps
Highmaps官网提供了完整的Javascript脚本和范例程序。开发者都可以免费获取这些资源。下面讲解如何下载Highmaps。
(1)在浏览器打开官网http://www.highcharts.com/,如图1.1所示。
图1.1 Highmaps官方首页
(2)单击Highmaps页面下的Download按钮,进入Highmaps的下载页面,如图1.2所示。
图1.2 Highcharts下载页面
(3)该页面提供两种两种下载:普通下载和定制下载。这里选择普通下载模式,直接单击HIGHMAPS 1.1.6按钮,下载保存文件Highmaps-1.1.6.zip。解压该文件后如图1.3所示。
图1.3 Highcharts文件结构
这些文件夹依次保存着Highmaps各种重要文件。
- q api文件夹中保存着离线的API说明文档;
- q examples文件夹中保存着Highmaps官方提供的各种范例程序;
- q gfx文件夹保存这VML功能所需要的图形文件;
- q graphics文件夹保存着范例程序所使用的图形文件;
js目录中保存着Highchats最重要的js文件,如图1.4所示。它里面包含几个文件夹,下面依次讲解讲解:
图1.4 js目录结构
当前目录下的Javascript脚本文件分为两类。直接以.js结尾的脚本文件是最常使用的文件。这些文件在使用的时候需要依赖相应的框架,如jQuery框架。以.src.js结尾的文件是源码文件,供开发者查阅。下面依次讲解其中的几个文件夹。
- q adapters文件夹保存着Highmaps的独立框架文件,便于用户不借助jQuery实现地图功能;
- q modules文件夹保存着Highmaps的一些模块功能脚本;
- q themes文件夹保存着Highmaps图标的主题脚本。
Highmaps的地图类型
Highmaps支持常见的地图图表类型。用户可以通过查看范例文件,了解常见的地图类型。双击压缩包中的index.htm文件,可以查看官方提供的地图类型。
注意:由于网页中引用了Google API的托管代码,所以查看示例的时候,最好使用VPN联网查看。否则,会造成页面无法打开的问题。
由于官方实例从不同角度展现Highmaps的应用,所以实例分类有点凌乱。这里列出最常见的几种地图类型。
1.基本地图类型
基本地图类型是Highmaps中最常见的类型,它使用map模版实现。它直接使用地图上的部分地图作为数据节点,如图1.5所示。
图1.5 基本地图类型
2.基本地图+线条类型
用户还可以在基本地图的基础上添加新的图形元素。而新添加的图形元素作为数据节点而存在。如图1.6所示,人体构造图是基本地图,而身高标记图形就是作为节点存在。该类型图表由Highmaps的mapline模版实现。
图1.6 基本地图+线条类型
3.基本地图+节点类型
用户也可以在基本地图上直接添加位置坐标,而标记节点信息。这样就构成了基本地图+节点类型图表,如图1.7所示。在图中,中国地图作为基本地图,而太原节点则作为节点按照地理经纬度标记在地图上。
图1.7 基本地图+节点类型
4.基本地图+气泡类型
用户还可以在基本地图基础上,以气泡的形式标记节点。这样不仅展现位置信息,还展现节点对应的数值信息,如图1.8所示。在图中,中国地图作为基本地图,而每个省的发展度以气泡提示。
图1.8 基本地图+气泡类型
本文选自:Highmaps网页图表基础教程大学霸内部资料,转载请注明出处,尊重技术尊重IT人!
Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型的更多相关文章
- Highmaps网页图表教程之图表配置项结构与商业授权
Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps图表配置项结构 Highmaps最核心的部分就是图表配置项.用户通过图表配置项来对标题进行定制,从而实现自己所要的效果.所以,掌 ...
- Highmaps网页图表教程之绘图区显示标签显示数据标签定位
Highmaps网页图表教程之绘图区显示标签显示数据标签定位 Highmaps数据标签定位 由于数据标签是和节点一一对应,所以数据标签是依据节点位置进行定位的.本节详细讲解如何对数据标签进行定位. H ...
- Highmaps网页图表教程之数据标签与标签文本
Highmaps网页图表教程之数据标签与标签文本 Highmaps数据标签 数据标签用于在地图图表上展现节点对应的数据.数据标签展现数据是静态的,只要节点一加载,数据标签就会出现在节点附近.在High ...
- Highmaps网页图表教程之Highmaps第一个实例与图表构成
Highmaps网页图表教程之Highmaps第一个实例与图表构成 Highmaps第一个实例 下面我们来实现本教程的第一个Highmaps实例. [实例1-1:hellomap]下面来制作一个中国地 ...
- 网页图表Highcharts实践教程之认识Highcharts
网页图表Highcharts实践教程之认识Highcharts 认识Highcharts Highcharts是国际知名的一款图表插件.它完全使用Javascript编写实现.其结构清晰,使用简单.开 ...
- 网页图表Highcharts实践教程之外层图表区
网页图表Highcharts实践教程之外层图表区 Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细 ...
- 网页图表Highcharts实践教程之图表代码构成
网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...
- 网页图表Highcharts实践教程之标签组与载入动画
网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不是 ...
- 网页图表Highcharts实践教程标之添加题副标题版权信息
网页图表Highcharts实践教程标之添加题副标题版权信息 Highcharts辅助元素 辅助元素图表的非必要元素,如标题.版权信息.标签.载入动态.它们不和图表数据发生关联,只是额外说明一些基本信 ...
随机推荐
- Linux学习-1进程
在Linux中,在一个程序的内部启动另外一个程序,从而创建一个新进程. 1.这个工作可以通过库函数system来完成. #include<stdlib.h> int system (con ...
- 如何清理休眠文件(hiberfil.sys)
如果使用了休眠功能,那么打开系统盘就会有一个很大(5.36G)的hiberfil.sys文件,它是将用户正在运行的程序,保存在这里,再启动系统就很快了.如要清理它(不用休眠功能,或者临时腾出空间),可 ...
- Libheap:一款用于分析Glibc堆结构的GDB调试工具
Libheap是一个用于在Linux平台上分析glibc堆结构的GDB调试脚本,使用Python语言编写. 安装 Glibc安装 尽管Libheap不要求glibc使用GDB调试支持和 ...
- listen系统调用
/* * Perform a listen. Basically, we allow the protocol to do anything * necessary for a listen, and ...
- 【Git】Git与GitHub 入门【转】
转自:http://www.cnblogs.com/lcw/p/3394545.html GitHub GitHub是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公 ...
- usbnet驱动深入分析-usb虚拟网卡host端【转】
转自:http://blog.csdn.net/zh98jm/article/details/6339320 1.驱动流程: 2.明确probe函数的功能: probe有usb core 经枚举过 ...
- python 结构化数据解析
# -*- coding: utf-8 -*- # @Time : 2018/8/31 14:32 # @Author : cxa # @File : glomtest.py # @Software: ...
- IDL界面程序直接调用envi菜单对应功能
参考自http://blog.sina.com.cn/s/blog_764b1e9d010115qu.html 参考文章的方法是构建一个button控件,通过单击实现,这种方法比较复杂,不是我们经常能 ...
- Dapper实用教程
Dapper是什么? Dpper是一款.Net平台简单(Simple)的对象映射库,并且Dapper拥有着“微型ORM之王”的称号.就速度而言与手写ADO.NET SqlDateReader相同.OR ...
- 15 Defer, Panic, and Recover
Defer, Panic, and Recover 4 August 2010 Go has the usual mechanisms for control flow: if, for, switc ...