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

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

Highmaps第一个实例

下面我们来实现本教程的第一个Highmaps实例。

【实例1-1:hellomap】下面来制作一个中国地图的图表。操作过程如下:

(1)新建一个网页文件,命名为Hellomap。同时将title设置Hello Highmaps。代码如下:

  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <meta charset="utf-8" />
  • <title>Hello Highmaps</title>
  • <style type="text/css">
  • #container {
  • width:500px;
  • height:500px;
  • border:1px solid #000;
  • padding :0px;
  • margin:10px;
  • }
  • </style>
  • </head>
  • <body>
  • </body>
  • </html>

(2)在网页中添加一个div,设置id为container。

  • <div id="container"></div>

(3)设置该div的样式,代码如下:

  • <style type="text/css">
  • #container {
  • width:500px;
  • height:500px;
  • border:1px solid #000;
  • padding :0px;
  • margin:10px;
  • }
  • </style>

(4)引去jQuery脚本和Highmaps脚本,代码如下:

  • <script src="jquery.js"></script>
  • <script src="highmaps.js"></script>

(5)引入地图数据,这里使用的是从Highmaps官网下载的地图数据。代码如下:

  • <script src="cn-all-sar-taiwan.js"></script>

(6)添加地图绘制代码。代码如下:

  • <script type="text/javascript">
  • $(document).ready(function () {
  • var options = {
  • chart: {
  • },
  • mapNavigation: {
  • enabled: true
  • },
  • title: {
  • text: ‘地图‘
  • },
  • subtitle: {
  • text: ‘临时数据‘
  • },
  • series: [{
  • name:‘省份‘,
  • mapData: Highcharts.maps[‘countries/cn/custom/cn-all-sar-taiwan‘],
  • joinBy:‘hc-key‘,
  • data: [{
  • ‘hc-key‘: ‘cn-zj‘,
  • value:22
  • }, {
  • ‘hc-key‘: ‘cn-sx‘,
  • value:50
  • }],
  • dataLabels: {
  • enabled: true,
  • crop: false,
  • overflow: ‘none‘,
  • }
  • }],
  • credits: {
  • text: ‘大学霸‘,
  • href: ‘http://daxueba.net‘
  • }
  • };
  • $(‘#container‘).highcharts(‘Map‘,options);
  • });
  • </script>

保存以上文件,运行结果如图1.9所示。


图1.9  第一个Highmaps实例

Highmaps图表构成

为了方便大家更好了解Highmaps图表,这里从界面和代码两个角度讲解Highmaps地图的实现方式。

Highmaps界面构成

在第一个实例中,虽然我们编写的代码很少,但是Highmaps却为我们生成了非常完整的地图图表。在这个图表中,除了显示地图以外,还显示了很多辅助图表元素,如图1.10所示。这些辅助元素包括标题、副标题、缩放按钮、提示框、数据标签、图例和版权信息。下面简要讲解这些元素的作用。

  • q  标题/副标题:用来简要说明图表所要表达的内容,帮助浏览者快速了解图表的重点。
  • q  缩放按钮:用来放大和缩小地图,帮助浏览者更清楚的了解地图细节。
  • q  提示框:当鼠标悬浮在有数据的节点上,就会以弹出的形式显示节点的相关信息。
  • q  数据标签:以静态的形式显示节点数值,由于空间有限,很多时候数据标签会被隐藏。
  • q  图例:用来数据的种类,尤其当图中包含多类数据的时候。同时,浏览者可以通过单击图例的方式,选中某一些数据,或者取消某一类的数据的显示。
  • q  版权信息:用来说明图表所有者信息。

图1.10  辅助图表元素

Highmaps代码构成

虽然我们在第一个实例中并没有编写多少代码,但图1.9却展现丰富的内容。这充分的体现了Highmaps使用的便捷性。实现Highmaps图表实际分为两个步骤,依次讲解。

1.图表配置项对象

Highmaps核心主体就是图表配置项对象。该对象包含了图表的各类数据和配置信息。每个部分往往都是由更小的配置项对象组成。用户只要按照规范的格式,填写对应的数据和配置值,就可以。整个过程就像搭建积木一样。下面对第一个实例的配置项对象做简要介绍。

  • var options = {
  • chart: {                                                          //图表的基本信息配置项
  • },
  • mapNavigation: {                                       //导航功能
  • enabled: true                                       //启用导航功能
  • },
  • title: {                                                             //标题
  • text: ‘地图‘                                             //设置标题文本
  • },
  • subtitle: {                                                      //副标题
  • text: ‘临时数据‘                                     //设置副标题
  • },
  • series: [{                                                       //定义数据列
  • name:‘省份‘,                                         //数据列的名字
  • mapData: Highcharts.maps[‘countries/cn/custom/cn-all-sar-taiwan‘],      //地图数据来源
  • joinBy:‘hc-key‘,                                    //设置节点与地图关联模式
  • data: [{                                                  //节点数据
  • ‘hc-key‘: ‘cn-zj‘,
  • value:22
  • }, {
  • ‘hc-key‘: ‘cn-sx‘,
  • value:50
  • }],
  • dataLabels: {                                       //数据标签
  • enabled: true,
  • crop: false,
  • overflow: ‘none‘,
  • }
  • }],
  • credits: {                                                       //版权信息
  • text: ‘大学霸‘,
  • href: ‘http://daxueba.net‘
  • }
  • };

从代码中可以看出,界面中的每个部分都对应代码中的一个小模块。这样,便于用户构建图表,并进行后期的调试。

2.在容器中绘制图表

在指定好配置项对象后,用户就可以使用Highmaps插件提供的higcharts方法在指定的容器中绘制图表。需要的代码只需要以下一行。

  • $(‘#container‘).highcharts(‘Map‘,options);

只需要以上两个步骤,就可以在现有的网页中绘制出图1.9所示的图表了。用户对图表进行扩展,只需要修改图表配置对象即可。

本文选自:Highmaps网页图表基础教程大学霸内部资料,转载请注明出处,尊重技术尊重IT人!

时间: 2024-10-07 15:41:13

Highmaps网页图表教程之Highmaps第一个实例与图表构成的相关文章

php教程之Smarty模板用法实例

分享下php之Smarty模板的使用方法. 剖析了smarty模板的使用方法,对于学习smarty的朋友有一定的参考价值. 详情如下: 一.模板中的注释每一个Smarty模板文件,都是通过Web前台语言(xhtml,css和javascript等)结合Smarty引擎的语法开发的.用到的web前台开发的语言和原来的完全一样,注释也没有变化.Smarty注释语法是'左结束符变量值*'和'*右结束符变量值',在这两个定界符之间的内容都是注释内容,可以包含一行或多行,并且用户浏览网页查看原代码时不会看

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

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

Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型

Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型 认识Highmaps Highmaps是Highcharts的姊妹框架,用来实现地图图表. 它全然使用Javascript编写实现.其结构清晰,使用简单.开发者能够非常轻松地构建出常见的各种地图图表类型. 本章将简要介绍Highmaps的特点.并实现第一个Highmaps地图应用. Highmaps概述 为了更好学习Highmaps的使用.我们首先了解怎样获取Highmaps插件和Highmaps所支持的图表类型.

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

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

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

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

DNS域欺骗攻击详细教程之Linux篇

.DNS域欺骗攻击原理 DNS欺骗即域名信息欺骗是最常见的DNS安全问题.当一 个DNS服务器掉入陷阱,使用了来自一个恶意DNS服务器的错误信息,那么该DNS服务器就被欺骗了.DNS欺骗会使那些易受攻击的DNS服务器产生许多 安全问题,例如:将用户引导到错误的互联网站点,或者发送一个电子邮件到一个未经授权的邮件服务器. 二.DNS域欺骗攻击实现步骤 1.配置实验环境: 2.假设攻击者已经侵入受害者机器实施攻击: 3.使用嗅探进行DNS ID欺骗: 4.DNS通配符攻击. 我们需要像图1那样设置实

Wireshark数据抓包教程之Wireshark捕获数据

Wireshark数据抓包教程之Wireshark捕获数据 Wireshark抓包方法 在使用Wireshark捕获以太网数据,可以捕获分析到自己的数据包,也可以去捕获同一局域网内,在知道对方IP地址的情况下,捕获到对方的数据包. Wireshark捕获自己的数据包 如果客户端经过路由器直接上网,如图1.28所示.在该图中,PC机A安装Wireshark,可以在该主机上直接捕获自己的数据. 图1.28  在主机上捕获数据 Wireshark捕获别人的数据包 如果都在一个局域网内,而且知道别人的I

ArduinoYun教程之Arduino环境与Linux环境的桥梁Bridge

ArduinoYun教程之Arduino环境与Linux环境的桥梁Bridge Arduino环境与Linux环境的桥梁--Bridge 在第一章中介绍Arduino Yun硬件的时候提到过,它上面有两个处理器ATmega32U4和Atheros 9331.20个IO口和Micro USB口是连接在ATmega32U4上的,而WiFi.Ethernet.SD卡槽和USB口是连接在Atheros上的.如果这两个处理器只能独立工作,那么把他们集成到Yun中也就没有意义了.所以,ATmega32U4和

HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID

HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID HealthKit开发准备工作 在开发一款HealthKit应用程序时,首先需要讲解HealthKit中有哪些类,在iOS上的Health即健康应用有哪些功能等.本节将针对这些问题进行讲解. HealthKit框架体系 对于一类应用程序来说,要进行开发,首先需要熟悉它的框架体系,即类.以下我们针对HealthKit中所使用的类进行了总结,如表1-1所示. 1-1  HealthKit框架体系 类 功能 NSObje