网页图表教程

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

由 旧巷老猫 提交于 2019-12-10 02:42:07
Highmaps网页图表教程之绘图区显示标签显示数据标签定位 Highmaps 数据标签定位 由于数据标签是和节点一一对应，所以数据标签是依据节点位置进行定位的。本节详细讲解如何对数据标签进行定位。 Highmaps 节点定位 在 mappoint 、 mapbubble 、 mapline 图表类型，节点都有明确位置。而在 map 图表类型中，节点对应的是一个区域。所以， map 图表类型的节点中心位置就可以由用户来设定。设置时候需要使用到以下两个配置项： middleX: Number1 middleY: Number2 其中，参数 Number1 指定节点中心在水平方向的位置，值的范围为 0~1 。 0 表示节点对应区域的最左端， 1 表示最右端；默认值为 0.5 。参数 Number2 指定节点中心在垂直方向的位置，值的范围为 0~1 。 0 表示区域的最顶端， 1 表示最底端；默认值为 0.5 。 Highmaps 对齐定位 在节点确定后，用户就可以设置数据标签相对节点的水平和垂直对齐方式了。下面依次讲解这两种方式： （ 1 ）使用配置项 align 设置水平对齐方式。其语法如下： align: String 其中，参数 String 指定水平的对齐方式，允许的值包括 left 、 center 、 right ，默认值为 center 。例如，如果用户设置为 left

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

由 早过忘川 提交于 2019-12-10 02:41:49
Highmaps网页图表教程之数据标签与标签文本 Highmaps数据标签 数据标签用于在地图图表上展现节点对应的数据。数据标签展现数据是静态的，只要节点一加载，数据标签就会出现在节点附近。在 Highmaps 中，数据标签使用配置项 dataLabels 进行设置。本章将详细讲解数据标签的使用方式。 Highmaps 构建数据标签 Highmaps 启用数据标签 默认状态下，地图图表均不显示数据标签。用户需要在数据列中启用才可以。这时，需要使用配置项 enabled 。其语法如下： enabled: Boolean 该配置项值的类型为布尔值。当值为 true 时，启用数据标签功能；当值为 false 时，禁用该功能。默认值为 false 。 【实例 4-1 ： showdatalabel 】下面在地图图表中显示数据标签。核心代码如下： series: [{ type:'map', dataLabels: { enabled:true // 启用数据列的数据标签功能 }, }], 执行代码后，效果如图 4.1 所示。 图 4.1 显示数据标签 Highmaps 数据标签设置方式 由于数据标签 dataLabels 定义在数据列中，所以数据标签可以在多个位置进行设置。常见的设置位置如下： q plotOptions.series.dataLabels

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

由 五迷三道 提交于 2019-12-10 02:41:35
Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps 图表配置项结构 Highmaps 最核心的部分就是图表配置项。用户通过图表配置项来对标题进行定制，从而实现自己所要的效果。所以，掌握图表配置项结构是非常重要。本节将大致讲解结构框架，便于读者后续深入。 Highmaps 基本结构 了解结构的最直接方式，就是看官网 API 。官方 API 详细列出了公开的配置项信息。查看官网 API 有两种方式： q 第一种是直接访问官网提供的 API ，网址为 http://api.highcharts.com/highmaps ，效果如图 1.11 所示。由于它是国外网站，所以经常会出现访问缓慢的问题。 q 第二种是在下载的 Highmaps 包中，双击 api 文件夹下的 highmaps.html 文件，也可以打开 API 帮助文档。 图 1.11 API 帮助页面 在左侧的 CONFIGURATION OPTIONS 下就是常用的配置项。其中， Highcharts.setOptions 是一些全局配置项目，包含 global 和 lang 两项。其中，配置项 lang 用于配置一些本地化的一些选项。这部分内容，会在后面具体讲解。 其中， ("#container").highcharts("Map", { 是我们最常用的选项，具体含义如表 1.1 所示。 表 1.1

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

由 血红的双手。 提交于 2019-12-10 02:41:23
Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型 认识 Highmaps Highmaps 是 Highcharts 的姊妹框架，用来实现地图图表。它完全使用 Javascript 编写实现。其结构清晰，使用简单。开发人员可以很轻松地构建出常见的各种地图图表类型。本章将简要介绍 Highmaps 的特点，并实现第一个 Highmaps 地图应用。 Highmaps 概述 为了更好学习 Highmaps 的使用，我们首先了解如何获取 Highmaps 插件和 Highmaps 所支持的图表类型。 下载 Highmaps Highmaps 官网提供了完整的 Javascript 脚本和范例程序。开发者都可以免费获取这些资源。下面讲解如何下载 Highmaps 。 （ 1 ）在浏览器打开官网 http://www.highcharts.com/ ，如图 1.1 所示。 图 1.1 Highmaps 官方首页 （ 2 ）单击 Highmaps 页面下的 Download 按钮，进入 Highmaps 的下载页面，如图 1.2 所示。 图 1.2 Highcharts 下载页面 （ 3 ）该页面提供两种两种下载：普通下载和定制下载。这里选择普通下载模式，直接单击 HIGHMAPS 1.1.6 按钮，下载保存文件 Highmaps-1.1.6.zip

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

由 我是研究僧i 提交于 2019-12-10 02:27:00
Highmaps网页图表教程之Highmaps第一个实例与图表构成 Highmaps 第一个实例 下面我们来实现本教程的第一个 Highmaps 实例。 【实例 1-1 ： hellomap 】下面来制作一个中国地图的图表。操作过程如下： （ 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 ，设置 id 为 container 。 <div id="container"></div> （ 3 ）设置该 div 的样式，代码如下： <style type="text/css"> #container { width:500px; height:500px;
订阅 网页图表教程