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

Posted llguanli

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Highmaps网页图表教程之Highmaps第一个实例与图表构成相关的知识,希望对你有一定的参考价值。

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

Highmaps第一个实例

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

【实例1-1hellomap】以下来制作一个中国地图的图表。操作步骤例如以下:

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。设置idcontainer

  • ? ??<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所看到的。这些辅助元素包括标题、副标题、缩放button、提示框、数据标签、图例和版权信息。以下简要解说这些元素的作用。

  • q??标题/副标题:用来简要说明图表所要表达的内容,帮助浏览者高速了解图表的重点。

  • q??缩放button:用来放大和缩小地图,帮助浏览者更清楚的了解地图细节。

  • 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第一个实例与图表构成的主要内容,如果未能解决你的问题,请参考以下文章

highcharts和highmaps冲突

中国地图(Highmaps)

Highmaps的天津地图数据JSON格式

Highcharts / Highmaps with Angular - 无法运行演示

Highmaps 二级地图怎么加点

Highmaps mappies with drilldown