网页图表Highcharts实践教程之认识Highcharts

网页图表Highcharts实践教程之认识Highcharts

第1章  认识Highcharts

Highcharts是国际知名的一款图表插件。它完全使用Javascript编写实现。其结构清晰,使用简单。开发人员可以很轻松地构建出常见的各种图表类型。本章将简要介绍Highcharts的特点,并实现第一个Highcharts图表。

Highcharts概述

为了更好学习Highcharts的使用,我们首先了解如何获取Highchrts插件和Highcharts所支持的图表类型。

下载Highcharts

Higcharts官网提供了完整的Javascript脚本和范例程序。开发者都可以免费获取这些资源。下面讲解如何下载Highcharts。

(1在浏览器打开官网http://www.highcharts.com/,如图1.1所示。

图1.1  Highcharts官方首页

(2单击Highcharts页面下的Download按钮,进入Highcharts的下载页面,如图1.2所示。

图1.2  Highcharts下载页面

(3该页面提供两种两种下载:普通下载和定制下载。这里选择普通下载模式,直接单击HIGHCHARTS 4.1.5按钮,下载保存文件Highcharts-4.1.5.zip。解压该文件后如图1.3所示。

图1.3  Highcharts文件结构

这些文件夹依次保存着Highcharts各种重要文件。

q  api文件夹中保存着离线的API说明文档;

q  examples文件夹中保存着Highcharts官方提供的各种范例程序;

q  exporting-server文件夹保存着图表导出功能实现的服务器端代码;

q  gfx文件夹保存这VML功能所需要的图形文件;

q  graphics文件夹保存着范例程序所使用的图形文件;

js目录中保存着Highchats最重要的js文件,如图1.4所示。它里面包含几个文件夹,下面依次讲解讲解:

图1.4  js目录结构

当前目录下的Javascript脚本文件分为两类。直接以.js结尾的脚本文件是最常使用的文件。这些文件在使用的时候需要依赖jQuery框架。以.src.js结尾的文件是源码文件,供开发者查阅。下面依次讲解其中的几个文件夹。

q  adapters文件夹保存着Highcharts适配Monntools、Prototype框架的脚本文件;

q  modules文件夹保存着Highcharts的一些模块功能脚本;

q  themes文件夹保存着Highcharts图标的主题脚本。

Highcharts的图表类型

Highcharts支持的大量的图标类型。用户可以通过范例文件查看这些图标的类型。双击index.html文件,可以打开示例页面。在该页面列出十大类示例,如下所示:

注意:由于网页中引用了Google API的托管代码,所以查看示例的时候,最好使用VPN联网查看。否则,会造成页面无法打开的问题。

(1)Line Charts(折线图),如图1.5所示。

图1.5  折线图

(2)Area charts(面积图),如图1.6所示。

图1.6  面积图

(3)Column and bar charts(柱形图和条形图),如图1.7和1.8所示。

图1.8  条形图

(4)Pie charts(饼图),如图1.9所示。

图1.9  饼图

(5)Scatter and bubble charts(散点图和气泡图),如图1.10和1.11所示。

图1.11  气泡图

(6)Dynamic charts(动态图)是特殊一类图表。他显示的数据是动态变化,如图1.12所示。

图1.12  动态图

(7)Combinations(组合图)是将前面类型的图标进行组合显示在一个区域内,如图1.13所示。

图1.13  组合图

(8)3D charts(3D图表)是在基础图标的基础上,以3D效果进行显示,如图1.14所示。

图1.14  3D图

(9)Gauges(仪表盘)也是一类特殊的图标。它以类似速度计的方式显示数据,如图1.15所示。

图1.15  仪表盘

(10)Heat maps(热图)如图1.16所示。

图1.16  热图

(11)More chat types(其他图)包含一些不常用的图标类型,如图1.17所示的雷达图。

图1.17  雷达图

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

时间: 2024-10-10 17:37:31

网页图表Highcharts实践教程之认识Highcharts的相关文章

网页图表Highcharts实践教程之图表代码构成

网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如下: (1)新建一个网页文件,命名为Hello.html.同时,将title设置为Hello Highcharts.代码如下: <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head>

网页图表Highcharts实践教程之图表区

网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细讲解图表区的设置和创建. 网页图表Highcharts图表区的构成 为了方便管理,Highcharts将所有的图表元素都绘制在一个Box区域内,如图2.1所示.这个区域被称为图表区.由于图表中最重要的数据就是图表图形,所以图表图形所在的区域又构成一个独立的区域,称为绘图区,如图2.1所示. 图2

网页图表Highcharts实践教程之外层图表区

网页图表Highcharts实践教程之外层图表区 Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细讲解图表区的设置和创建. Highcharts图表区的构成 为了方便管理,Highcharts将所有的图表元素都绘制在一个Box区域内,如图2.1所示.这个区域被称为图表区.由于图表中最重要的数据就是图表图形,所以图表图形所在的区域又构成一个独立的区域,称为绘图区,如图2.1所示. 图2.1  图表

?网页图表Highcharts实践教程标之添加题副标题版权信息

网页图表Highcharts实践教程标之添加题副标题版权信息 Highcharts辅助元素 辅助元素图表的非必要元素,如标题.版权信息.标签.载入动态.它们不和图表数据发生关联,只是额外说明一些基本信息.合理的使用这些部分,可以补充数据的不足.本章将详细讲解几种常见的辅助元素. Highcharts标题/副标题 为了说明图表展现的数据,Highcharts为每个图表提供标题title和副标题subtitle两个组件.本节将详细讲解这两个组件的使用方式. Highcharts标题和副标题的构成 在

?网页图表Highcharts实践教程之标签组与载入动画

?网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不是很方便.Highcharts为用户提供了标签组功能.使用该功能可以在图表区的任意位置添加一个或者多个标签,如图3.9所示.该图表中在副标题前面增加一个标签,用以说明数据列展现的年份. 图3.9  标签组的应用 Highcharts标签组的结构 在Highcharts中,标签组使用labels组件实

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

Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型 认识Highmaps Highmaps是Highcharts的姊妹框架,用来实现地图图表. 它全然使用Javascript编写实现.其结构清晰,使用简单.开发者能够非常轻松地构建出常见的各种地图图表类型. 本章将简要介绍Highmaps的特点.并实现第一个Highmaps地图应用. Highmaps概述 为了更好学习Highmaps的使用.我们首先了解怎样获取Highmaps插件和Highmaps所支持的图表类型.

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

Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps图表配置项结构 Highmaps最核心的部分就是图表配置项.用户通过图表配置项来对标题进行定制,从而实现自己所要的效果.所以,掌握图表配置项结构是非常重要.本节将大致讲解结构框架,便于读者后续深入. Highmaps基本结构 了解结构的最直接方式,就是看官网API.官方API详细列出了公开的配置项信息.查看官网API有两种方式: q  第一种是直接访问官网提供的API,网址为http://api.highcharts.com

【HighCharts系列教程】一、认识Highcharts

一.什么是HighCharts HighCharts是网页报表工具,开发语言是Javascript HighCharts是一个简单易用.美观.跨平台.跨浏览器的图表工具 HighCharts支持图表的类型有:曲线图.柱状图.饼状图.区域图.散点图.综合图的各种图表需求.最新版2.3.5(截止2013/1/10)增加了各种仪表.时钟等类型图表 说了这么多,总之就是一句话,如果你有图表需求,选择HighCharts吧! 二.如何学习HighCharts 修改HighCharts自带的例子 了解Hig

highcharts实例教程二:结合php与mysql生成饼图

上回我们分析了用highcharts结合php和mysql生成折线图的实例,这次我们以技术cto网站搜索引擎流量为例利用highcharts生成饼图. 饼图通常用在我们需要直观地显示各个部分所占的比例的时候,比如我们需要统计各大搜索引擎来的流量比例. 第一步:创建数据库保存各搜索引擎流量的pv数 CREATE TABLE `pie` (   `id` int(10) NOT NULL AUTO_INCREMENT,   `title` varchar(30) NOT NULL,   `pv` i