Highmaps网页图表教程之Highmaps第一个实例与图表构成
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第一个实例与图表构成的更多相关文章
- MongoDB入门教程之C#驱动操作实例
实体类: using MongoDB.Bson; namespace WindowsFormsApp { class User { //public ObjectId _id; //BsonType. ...
- php教程之Smarty模板用法实例
分享下php之Smarty模板的使用方法. 剖析了smarty模板的使用方法,对于学习smarty的朋友有一定的参考价值. 详情如下: 一.模板中的注释每一个Smarty模板文件,都是通过Web前台语 ...
- Highmaps网页图表教程之图表配置项结构与商业授权
Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps图表配置项结构 Highmaps最核心的部分就是图表配置项.用户通过图表配置项来对标题进行定制,从而实现自己所要的效果.所以,掌 ...
- Highmaps网页图表教程之绘图区显示标签显示数据标签定位
Highmaps网页图表教程之绘图区显示标签显示数据标签定位 Highmaps数据标签定位 由于数据标签是和节点一一对应,所以数据标签是依据节点位置进行定位的.本节详细讲解如何对数据标签进行定位. H ...
- Highmaps网页图表教程之数据标签与标签文本
Highmaps网页图表教程之数据标签与标签文本 Highmaps数据标签 数据标签用于在地图图表上展现节点对应的数据.数据标签展现数据是静态的,只要节点一加载,数据标签就会出现在节点附近.在High ...
- Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型
Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型 认识Highmaps Highmaps是Highcharts的姊妹框架,用来实现地图图表.它完全使用Javascript ...
- [Mugeda HTML5技术教程之14]案例分析:制作网页游戏
本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...
- jQuery EasyUI教程之datagrid应用(一)
最近一段时间都在做人事系统的项目,主要用到了EasyUI,数据库操作,然后抽点时间整理一下EasyUI的内容. 这里我们就以一个简洁的电话簿软件为基础,具体地说一下datagrid应用吧 datagr ...
- HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID
HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID HealthKit开发准备工作 在开发一款HealthKit应用程序时,首先需要讲解HealthKit中有哪些类,在i ...
随机推荐
- c++ STL 常用容器元素类型相关限制 指针 引用
c++ 的 STL 中主要有 vector , list, map, set , multimap,multiset 这些容器完全支持使用内置类型和指针(指针注意内存泄露问题). 就是说乱用智能指针 ...
- JDK1.8源码ArrayList
线程不安全的,如果要想线程安全必须在创建的时候就采用线程安全的方式创建: List list = Collections.synchronizedList(new ArrayList(...)); 引 ...
- 2016 最佳 Linux 发行版排行榜【转】
转自:http://www.linuxstory.org/the-best-linux-distros-of-2016/?utm_source=tuicool&utm_medium=refer ...
- Microsoft.AspNet.SignalR使用cookie丢失
public void SendGroupMessage(string roomId, string message, string status) { // 调用房间内所有客户端的sendMessa ...
- MVVM模式View和ViewModel的通信
还需要些什么呢 在前面几篇博客中我们尝试去实现了MVVM中的数据绑定.命令绑定和事件绑定.貌似实现的差不多了.我最早尝试用MVVM去开发的时候也是这么想的,没有用第三方框架,甚至只是实现了数据绑定和命 ...
- 最详细的block底层
主要讲述的要点: block 干什么用的 block 语法 block 底层实现 block 变量捕捉 block 的种类.在存储空间中的存储位置 block 循环引用 __block 在ARC 中 ...
- 无需编译app切换线上、测试环境
在咱们测试过程中,经常需要切换测试环境和线上环境.大致有如下几个方案. 一.服务器地址编译到app中 此种方式需要在代码里保存两套配置,一套指向线上,一套指向测试.通过编译参数分别生成测试包.线上包. ...
- 回归模型效果评估系列2-MAE、MSE、RMSE、MAPE(MAPD)
MAE.MSE.RMSE.MAPE(MAPD)这些都是常见的回归预测评估指标,重温下它们的定义和区别以及优缺点吧 MAE(Mean Absolute Error) 平均绝对误差 ...
- 组件化表单解决方案AForm 1.3 发布
v1.3 更新日志 输入控件的实现改为实例化模式,同类型多个输入控件在同一个表单不会冲突 输入控件实现了继承 可以使用AForm.create创建表单,和使用new AForm创建实例的参数和结果一样 ...
- 【[SDOI2009]Bill的挑战】
一看题解好像全是状压DP,那么我就来补充一个容斥写法吧 乍一看,好像是水题,枚举选哪k个串,然后判断 1,如果这k个串中至少两个串某位置确定且不相同,答案显然为02,如果这个位置只被有且仅有一个串确定 ...