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页面下的Downloadbutton。进入Highmaps的下载页面。如图1.2所看到的。

图1.2  Highcharts下载页面

(3)该页面提供两种两种下载:普通下载和定制下载。

这里选择普通下载模式,直接单击HIGHMAPS 1.1.6button。下载保存文件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人!

时间: 2024-10-12 00:08:03

Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型的相关文章

Highmaps网页图表教程之图表配置项结构与商业授权

Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps图表配置项结构 Highmaps最核心的部分就是图表配置项.用户通过图表配置项来对标题进行定制,从而实现自己所要的效果.所以,掌握图表配置项结构是非常重要.本节将大致讲解结构框架,便于读者后续深入. Highmaps基本结构 了解结构的最直接方式,就是看官网API.官方API详细列出了公开的配置项信息.查看官网API有两种方式: q  第一种是直接访问官网提供的API,网址为http://api.highcharts.com

?Highmaps网页图表教程之绘图区显示标签显示数据标签定位

?Highmaps网页图表教程之绘图区显示标签显示数据标签定位 Highmaps数据标签定位 由于数据标签是和节点一一对应,所以数据标签是依据节点位置进行定位的.本节详细讲解如何对数据标签进行定位. Highmaps节点定位 在mappoint.mapbubble.mapline图表类型,节点都有明确位置.而在map图表类型中,节点对应的是一个区域.所以,map图表类型的节点中心位置就可以由用户来设定.设置时候需要使用到以下两个配置项: middleX: Number1 middleY: Num

Highmaps网页图表教程之数据标签与标签文本

Highmaps网页图表教程之数据标签与标签文本 Highmaps数据标签 数据标签用于在地图图表上展现节点对应的数据.数据标签展现数据是静态的,只要节点一加载,数据标签就会出现在节点附近.在Highmaps中,数据标签使用配置项dataLabels进行设置.本章将详细讲解数据标签的使用方式. Highmaps构建数据标签 Highmaps启用数据标签 默认状态下,地图图表均不显示数据标签.用户需要在数据列中启用才可以.这时,需要使用配置项enabled.其语法如下: enabled: Bool

Highmaps网页图表教程之Highmaps第一个实例与图表构成

Highmaps网页图表教程之Highmaps第一个实例与图表构成 Highmaps第一个实例 下面我们来实现本教程的第一个Highmaps实例. [实例1-1:hellomap]下面来制作一个中国地图的图表.操作过程如下: (1)新建一个网页文件,命名为Hellomap.同时将title设置Hello Highmaps.代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta chars

网页图表Highcharts实践教程之认识Highcharts

网页图表Highcharts实践教程之认识Highcharts 第1章  认识Highcharts Highcharts是国际知名的一款图表插件.它完全使用Javascript编写实现.其结构清晰,使用简单.开发人员可以很轻松地构建出常见的各种图表类型.本章将简要介绍Highcharts的特点,并实现第一个Highcharts图表. Highcharts概述 为了更好学习Highcharts的使用,我们首先了解如何获取Highchrts插件和Highcharts所支持的图表类型. 下载Highc

网页图表Highcharts实践教程之图表代码构成

网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如下: (1)新建一个网页文件,命名为Hello.html.同时,将title设置为Hello Highcharts.代码如下: <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head>

网页图表Highcharts实践教程之图表区

网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细讲解图表区的设置和创建. 网页图表Highcharts图表区的构成 为了方便管理,Highcharts将所有的图表元素都绘制在一个Box区域内,如图2.1所示.这个区域被称为图表区.由于图表中最重要的数据就是图表图形,所以图表图形所在的区域又构成一个独立的区域,称为绘图区,如图2.1所示. 图2

网页图表Highcharts实践教程之外层图表区

网页图表Highcharts实践教程之外层图表区 Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细讲解图表区的设置和创建. Highcharts图表区的构成 为了方便管理,Highcharts将所有的图表元素都绘制在一个Box区域内,如图2.1所示.这个区域被称为图表区.由于图表中最重要的数据就是图表图形,所以图表图形所在的区域又构成一个独立的区域,称为绘图区,如图2.1所示. 图2.1  图表

?网页图表Highcharts实践教程标之添加题副标题版权信息

网页图表Highcharts实践教程标之添加题副标题版权信息 Highcharts辅助元素 辅助元素图表的非必要元素,如标题.版权信息.标签.载入动态.它们不和图表数据发生关联,只是额外说明一些基本信息.合理的使用这些部分,可以补充数据的不足.本章将详细讲解几种常见的辅助元素. Highcharts标题/副标题 为了说明图表展现的数据,Highcharts为每个图表提供标题title和副标题subtitle两个组件.本节将详细讲解这两个组件的使用方式. Highcharts标题和副标题的构成 在