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. 【leetcode 简单】 第六十一题 存在重复元素

    给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 示例 1: 输入: [1,2,3,1] 输出: true ...

  2. 函数嵌套>作用域>闭包函数

    一:函数对象 函数是第一类对象,即表示函数可以当做数据传递 可以被引用:把函数内存地址赋值给一个变量名,仍然遵循函数的调用规则. 可以被当做参数传递:传递的是函数的运行的结果#可以当做返回值 把函数作 ...

  3. linux服务-ssh

    任务目标:ssh登录,scp上传.下载,ssh秘钥登录, 修改ssh server端的端口为8888然后进行登录和scp测试 使用ssh登陆host1 使用scp下载文件 scp root@192.1 ...

  4. 浅析XSS与XSSI异同

    浅析XSS与XSSI异同 这篇文章主要介绍了XSS与XSSI异同,跨站脚本(XSS)和跨站脚本包含(XSSI)之间的区别是什么?防御方法有什么不同?感兴趣的小伙伴们可以参考一下 Michael Cob ...

  5. 基于NIO的同步非阻塞编程完整案例,客户端发送请求,服务端获取数据并返回给客户端数据,客户端获取返回数据

    这块还是挺复杂的,挺难理解,但是多练几遍,多看看研究研究其实也就那样,就是一个Selector轮询的过程,这里想要双向通信,客户端和服务端都需要一个Selector,并一直轮询, 直接贴代码: Ser ...

  6. gitHub 迁移到gitlab上

    GitHub 迁移到 GitLab 上 第一步在github上生成 token 地址 https://blog.csdn.net/u014175572/article/details/55510825 ...

  7. mysql高可用架构 -> MHA部署-04

    MHA架构图 本次MHA的部署基于GTID复制成功构建,普通主从复制也可以构建MHA架构. 下载所需的软件包 mkdir /server/tools -p //创建存放包的目录 [root@db01 ...

  8. spring 学习之二 AOP编程

    AOP概念 AOP, aspect oriented programing,翻译过来就是面向切面编程的意思,那什么叫面向切面编程呢?相对于之前传统的纵向继承方式来对原有功能进行功能扩展, 面向切面编程 ...

  9. Flask:初次使用Blueprints

    Windows 10家庭中文版,Python 3.6.4,Flask 1.0.2,Eclipse Oxygen.1a Release (4.7.1a),PyDev 6.3.2 本文为记录自己第一次使用 ...

  10. echarts一些笔记

    console.log();  浏览器显示 $.ajax({ url : "ajax/echartWelcome.action", type : "post", ...