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

一、什么是HighCharts

  • HighCharts是网页报表工具，开发语言是Javascript
  • HighCharts是一个简单易用、美观、跨平台、跨浏览器的图表工具
  • HighCharts支持图表的类型有：曲线图、柱状图、饼状图、区域图、散点图、综合图的各种图表需求。最新版2.3.5（截止2013/1/10）增加了各种仪表、时钟等类型图表

说了这么多，总之就是一句话，如果你有图表需求，选择HighCharts吧！

二、如何学习HighCharts

  • 修改HighCharts自带的例子
  • 了解HighCharts的整体结构
  • 查看并熟悉HighCharts API文档
  • 自己开发

三、HighCharts资源

1、下载资源包

进入HighCharts下载地址：http://www.highcharts.com/download，点击“HighCharts”下载按钮

2、HighCharts资源包文件目录

解压得到的HighCharts-2.3.5.zip包，文件目录如下图

四、查看HighCharts的例子文件

打开highcharts目录下的index.htm

可以看到各种各样的自带的HighCharts图表实例，对应的也就是/examples目录下的文件

对于简单的使用和初学者，可以简单的修改自带的实例即可满足要求。你可以花点时间研究研究自带的实例

五、HighCharts整体结构

通过阅读HighCharts API文档我们知道HighCharts的结构如下

对应的，在图标中的位置如图

可以通过配置HighCharts各个部分的属性达到各种相应的效果。【HighCharts完整教程】系列文章也是从各个部门详细讲解HighCharts。

时间： 2024-11-09 15:41:23

【HighCharts系列教程】一、认识Highcharts的相关文章

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

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

【HighCharts系列教程】二、Highcharts结构及API文档

一.你必须知道的 1.首先,HighCharts是基于Jquery框架开发的,所以需要在页面引入Jquery,具体代码是: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 2.其次,需要引入HighCharts js文件 <script src="http

【HighCharts系列教程】四、颜色属性——colors

一.Colors属性说明 配置Colors,可以自定义数据列的颜色. 默认下colors就包含一系列颜色,在个性化或需要调整颜色的顺序下,我们可以配置该属性. 二.colors属性详解 Colors属性中包含的是一个十六进制颜色代码数组. 参数 默认值 说明 一组颜色代码,如 colors:['#4572A7','#89A54E',...] colors:[ '#4572A7',   '#AA4643',   '#89A54E',   '#80699B',   '#3D96AE',   '#DB

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

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

【HighCharts系列教程】六、去除highCharts版权信息的几种方法

方法一:单个图表去除版权 设置Credits属性为不可用,也就是credits中enable=false,具体代码如下 <script type="text/javascript"> $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'pie', }, credits :

【HighCharts系列教程】十、图例属性——legend

一.legend属性说明 Legend是HighCharts图表的图例属性,如图 默认情况下,HighCharts都会有图例,无特殊情况,默认即可满足需求,所以一般不用配置Legend属性. 二.lang属性详解 参数 说明 默认值 labelFormatter 显示函数,主要是调用该数据列的名字 labelFormatter: function() {return this.name;} backgroundColor 图例的背景颜色 null floating 是否随x,y轴浮动 false

【HighCharts系列教程】八、Html标签属性——Labels

一.labels属性说明 Labels属性允许在HighCharts图表的任意位置添加任意的html代码.可以实现许多自定义内容. 二.labels属性详解 参数 子参数 说明 默认值 items —- 一个html标签 —- —- html html代码 “” —- style 标签位置(只能是位置,其他css不行) style: {left: ’100px’,top: ’100px’} style —- 标签的颜色(这里的style和items中的style不同) style: {color

【HighCharts系列教程】五、版权属性——Credits

一.Credits属性说明 严格来讲,Credits并不算版权信息,官方的说法是:Highchart by default putsa credits label in the lower right corner of the chart. 不管怎样的说法,在自己的图表加上HighCharts字样并有链接,这都图表的美观.专业性都是不好的.通过配置Credits属性,你可以去除或修改HighCharts版权信息. 二.Credits属性详解 参数 说明 默认值 enable 是否显示版权信息

【HighCharts系列教程】九、语言属性——Lang

一.lang属性说明 Lang属性主要用于配置显示的文字等语言相关属性. 主要可配置如下内容:小数点符号.导出相关文字.月份文字.星期文字等 lang属性不重要,无特殊情况,不用配置. 二.lang属性详解 参数 说明 默认值 decimalPoint  小数点符号 . downloadPNGdownloadJPEGdownloadPDFdownloadSVG 和图表下载相关的文字 Download PNG imageDownload JPEG imageDownload PDF documen