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

Highmaps第一个实例

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

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

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

  • <html lang="en" 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人!

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

  1. MongoDB入门教程之C#驱动操作实例

    实体类: using MongoDB.Bson; namespace WindowsFormsApp { class User { //public ObjectId _id; //BsonType. ...

  2. php教程之Smarty模板用法实例

    分享下php之Smarty模板的使用方法. 剖析了smarty模板的使用方法,对于学习smarty的朋友有一定的参考价值. 详情如下: 一.模板中的注释每一个Smarty模板文件,都是通过Web前台语 ...

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

    Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps图表配置项结构 Highmaps最核心的部分就是图表配置项.用户通过图表配置项来对标题进行定制,从而实现自己所要的效果.所以,掌 ...

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

    Highmaps网页图表教程之绘图区显示标签显示数据标签定位 Highmaps数据标签定位 由于数据标签是和节点一一对应,所以数据标签是依据节点位置进行定位的.本节详细讲解如何对数据标签进行定位. H ...

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

    Highmaps网页图表教程之数据标签与标签文本 Highmaps数据标签 数据标签用于在地图图表上展现节点对应的数据.数据标签展现数据是静态的,只要节点一加载,数据标签就会出现在节点附近.在High ...

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

    Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型 认识Highmaps Highmaps是Highcharts的姊妹框架,用来实现地图图表.它完全使用Javascript ...

  7. [Mugeda HTML5技术教程之14]案例分析:制作网页游戏

    本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...

  8. jQuery EasyUI教程之datagrid应用(一)

    最近一段时间都在做人事系统的项目,主要用到了EasyUI,数据库操作,然后抽点时间整理一下EasyUI的内容. 这里我们就以一个简洁的电话簿软件为基础,具体地说一下datagrid应用吧 datagr ...

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

    HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID HealthKit开发准备工作 在开发一款HealthKit应用程序时,首先需要讲解HealthKit中有哪些类,在i ...

随机推荐

  1. HDU 1176 排列2 全排列

    解题报告:给出四个数,然后要你把这四个数组合成的各不相同的四位数按照从小到大的顺序输出来,然后如果最高位是0的话不能输出来,还有最高位是数字如果一样的话,则放在同一行输出. 本来是个比较简单的生成全排 ...

  2. 8、String练习题

    String练习   1.字符串反转,例如将"abc"变成"cba" 2.统计一个字符串里面另一个字符串出现的次数,例如统计"monkey" ...

  3. SQL SERVER 视图优化经历

    系统中要求对HIS数据进行效益统计,因为HIS数据是需要第三方提供接口导入的,不清楚数据量大小,所以视图以业务为主未对其做性能优化(当时编写试图时就是几条简单的测试数据) 如今在项目接口实施完成后查看 ...

  4. MongoDB以Windows Service运行

    以Administrator身份打开CMD并输入以下命令 cd D:\Developer\MongoDB\mongodb-win32-x86_64-2.4.6\binD:mongod --logpat ...

  5. Servlet笔记5--设置欢迎页面及HTTP状态码404、500

    欢迎页面: 代码详解: web.xml配置文件: <?xml version="1.0" encoding="UTF-8"?> <web-ap ...

  6. ubuntu的PPA

    PPA,表示Personal Package Archives,也就是个人软件包集很多软件包由于各种原因吧,不能进入官方的Ubuntu软件仓库.为了方便Ubuntu用户使用,launchpad.net ...

  7. openjudge-NOI 2.5-1789 算24

    题目链接:http://noi.openjudge.cn/ch0205/1789/ 题解: 并不是非常简单的搜索,需要考虑一些东西…… 首先有运算符优先级的限制,还有括号,数字的顺序也可以调整,如果只 ...

  8. unity 欧拉旋转

    欧拉旋转   在文章开头关于欧拉旋转的细节没有解释的太清楚,而又有不少人询问相关问题,我尽量把自己的理解写到这里,如有不对还望指出.     欧拉旋转是怎么运作的     欧拉旋转是我们最容易理解的一 ...

  9. python基础-类的反射

    1)反射是通过字符串方式映射内存中的对象. python中的反射功能是由以下四个内置函数提供:hasattr.getattr.setattr.delattr, 改四个函数分别用于对对象内部执行:检查是 ...

  10. 原生js封装dom操作库

    var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...