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

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

Highcharts第一个实例

下面我们来实现本书的第一个Highcharts实例。

【实例1-1】下面来制作北京连续一周最高温度折线图。操作过程如下:

(1新建一个网页文件,命名为Hello.html。同时,将title设置为Hello Highcharts。代码如下:

  • <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <meta charset="utf-8" />
  • <title>Hello Highcharts</title>
  • </head>
  • <body>
  • </body>
  • </html>

(2在网页中添加一个div,设置id为container。

  • <div id="container"></div>

(3设置该div的样式,代码如下:

  • <style type="text/css">
  • #container {
  • width:500px;
  • height:300px;
  • border:1px solid #000;
  • padding :20px;
  • margin:10px;
  • }
  • </style>

(4引入jQuery脚本和Highcharts脚本,代码如下:

  • <script src="jquery.js"></script>
  • <script src="highcharts.js"></script>

注意:这里需要将这两个脚本文件放到Hello.html所在的目录。

(5添加图表绘制代码。代码如下:

  • <script type="text/javascript">
  • $(document).ready(function () {
  • var options = {
  • chart: {
  • type: ‘line‘
  • },
  • title: {
  • text: ‘北京一周最高温度‘
  • },
  • subtitle: {
  • text: ‘2015.02.08--2015.02.14‘
  • },
  • series: [{
  • name: ‘最高温度‘,
  • data: [7, 11, 8, 7, 9, 9, 9]
  • }]
  • };
  • $(‘#container‘).highcharts(options);
  • });
  • </script>

保存以上文件,运行结果如图1.18所示。

 

图1.18  第一个实例

Highcharts图表构成

为了方便大家更好了解Highcharts图表,这里从界面和代码两个角度讲解Highcharts图表的实现方式。

Highcharts界面构成

在第一个实例中,我们实现了一个图表。作为一个图表,通常是由图表区、标题、绘图区、坐标轴、图例/数据列等几个部分构成,如图1.19所示。在Highcharts中,每个部分都由一个或者多个组件构成。其中,黑色方框括住的部分就是图表区。而由坐标轴围起来的部分就是绘图区。后面将依次讲解这几个部分的实现方式。这里,大家只要知道每个部分的名称即可。

 

图1.19  图表构成

Highcharts代码构成

虽然我们在第一个实例中并没有编写多少代码,但图1.19却展现丰富的内容。这充分的体现了Highcharts使用的便捷性。实现Highcharts图表实际分为两个步骤,依次讲解。

1.图表配置项对象

Highcharts核心主体就是图表配置项对象。该对象包含了图表的各类数据和配置信息。每个部分往往都是由更小的配置项对象组成。用户只要按照规范的格式,填写对应的数据和配置值,就可以。整个过程就像搭建积木一样。下面对第一个实例的配置项对象做简要介绍。

  • var options = {
  • chart: {                                                          //图表基本信息
  • type: ‘line‘                                             //指定图表类型
  • },
  • title: {                                                             //设置图表标题
  • text: ‘北京一周最高温度‘                     //指定标题内容
  • },
  • subtitle: {                                                      //设置图表副标题
  • text: ‘2015.02.08--2015.02.14‘                  //设置副标题内容
  • },
  • series: [{                                                       //定义数据列
  • name: ‘最高温度‘,                                //指定数据列的标题
  • data: [7, 11, 8, 7, 9, 9, 9]                    //指定数据节点
  • }]
  • };

这块内容也可以使用传统Javascript逐项赋值的方式实现。从维护角度考虑,推荐使用以上方式实现。

2.在容器中绘制图表

在指定好配置项对象后,用户就可以使用Highcharts插件提供的higcharts方法在指定的容器中绘制图表。需要的代码只需要以下一行。

  • $(‘#container‘).highcharts(options);

只需要以上两个步骤,就可以在现有的网页中绘制出图1.19所示的图表了。用户对图表进行扩展,只需要修改图表配置对象即可。

Highcharts商业授权和定制开发

在实际Highcharts开发过程中,开发者往往会面对授权问题和复杂需求问题。这里针对这两个方面最简要讲解,以帮助开发者更好的使用Highcharts。

Highcharts商业授权

Highcharts是一个非常好的图表插件。在使用的时候,它针对个人和非商业应用是全部免费的。对于商业开发,开发者需要购买相应的商业授权。在国内,开发者可以通过Highcharts官方授权的Higcharts中文网(hcharts.cn)购买商业授权。

该网站是国内最权威的Highcharts技术网站。它提供Highcharts各项服务,如商业授权、定制、咨询等服务。在浏览器中输入网址http://www.hcharts.cn/service/license.php,就可以进入该网站的商业授权网页,如图1.20所示。

 

图1.20  商业授权页面

按照网页提示,就可以申请购买商业授权。

Highcharts定制开发

在Highcharts中,各类图表的实现采用模版化机制。用户只需要极少的设置,就可以配置精美的图表。但实际开发中,开发者经常面临各种更为复杂的客户需求。这个时候,使用Highcharts提供各种配置项往往很难实现。遇到此类问题,用户可以通过购买定制服务,来解决使用中遇到的难题。

Highcharts中文网提供一流的技术咨询和定制服务,用户只需要进入官网的图表定制服务页面(如图1.21),就可以申请响应的服务。

 

图1.21  定制服务

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

时间: 2024-11-29 05:00:04

网页图表Highcharts实践教程之图表代码构成的相关文章

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

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

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

网页图表Highcharts实践教程之认识Highcharts 第1章  认识Highcharts Highcharts是国际知名的一款图表插件.它完全使用Javascript编写实现.其结构清晰,使用简单.开发人员可以很轻松地构建出常见的各种图表类型.本章将简要介绍Highcharts的特点,并实现第一个Highcharts图表. Highcharts概述 为了更好学习Highcharts的使用,我们首先了解如何获取Highchrts插件和Highcharts所支持的图表类型. 下载Highc

网页图表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组件实

Highcharts可拖动式图表

默认情况下,Highcharts依据给定的数据列生成图表. 浏览者是无法改动图表的. 假设浏览者须要手动调整数据节点.就须要借助第三方插件Draggable Points.使用该插件后,浏览者能够直接拖动图表中的数据节点位置,从而改动图表的值. 拖动前效果 拖动后效果 PS:该内容已经增加<网页图表Highcharts实践教程图表篇>v1.2.3中.

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

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

【HighCharts系列教程】三、图表属性——chart

一.chart属性说明 Chart是HighCharts图表中主要属性,包括了图表区域的颜色.线条.高度.宽度.对齐.图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一. 配置chart属性,你可以轻松改变你的图表的样式.外观. 二.chart属性详解 Chart常用属性如下表 参数 描述 默认值 backgroundColor 设置图表区背景色 #FFFFFF borderWidth 设置图表边框宽度 0 borderRadius 设置图表边框圆角角度 5 renderTo

ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件-开源

ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件-开源 Highcharts的ASP.NET Web自定义控件. 今天我就来改造它,将其使用最新的TagHelper 来实践,学习TagHelper 的使用也提供一个方便的图表控件在ASP.NET Core MVC中使用. 下面正式开始,使用之前的代码直接进行迁移升级. GitHub:https://