zoukankan      html  css  js  c++  java
  • Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型

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

    认识Highmaps

    HighmapsHighcharts的姊妹框架,用来实现地图图表。

    它全然使用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所看到的,人体构造图是基本地图。而身高标记图形就是作为节点存在。该类型图表由Highmapsmapline模版实现。


    1.6  基本地图+线条类型

    3.基本地图+节点类型

    用户也能够在基本地图上直接加入位置坐标,而标记节点信息。

    这样就构成了基本地图+节点类型图表。如图1.7所看到的。在图中,中国地图作为基本地图,而太原节点则作为节点依照地理经纬度标记在地图上。


    1.7  基本地图+节点类型

    4.基本地图+气泡类型

    用户还能够在基本地图基础上,以气泡的形式标记节点。这样不仅展现位置信息,还展现节点相应的数值信息,如图1.8所看到的。

    在图中,中国地图作为基本地图,而每一个省的发展度以气泡提示。


    1.8  基本地图+气泡类型

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


  • 相关阅读:
    The analysis of China's holding the Olympic Games
    ASP.NET获取客户端的操作系统、浏览器、.NET版本等信息(图)
    ASP.NET 无提示关闭窗口
    VC 使用CryptoAPI计算Hash值:MD5, SHA
    SQL Server 2005 中设置某个用户对某一个数据库有完全控制的权限
    C# 计算文件的MD5值
    VC 获取物理网卡的MAC地址
    哪些免费邮箱不在邮件内容里插广告?
    忆同学
    使用正则表达式获取连接字符串某项的值
  • 原文地址:https://www.cnblogs.com/yxysuanfa/p/7040099.html
Copyright © 2011-2022 走看看