实践教程

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

旧街凉风 提交于 2019-12-09 17:39:34
网页图表Highcharts实践教程之图表代码构成 Highcharts 第一个实例 下面我们来实现本书的第一个 Highcharts 实例。 【实例 1-1 】下面来制作北京连续一周最高温度折线图。操作过程如下: ( 1 ) 新建一个网页文件,命名为 Hello.html 。同时,将 title 设置为 Hello Highcharts 。代码如下: <html 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"><

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

落花浮王杯 提交于 2019-12-07 21:26:09
网页图表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