【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://code.highcharts.com/highcharts.js"></script>

引入HighCharts js文件还可以是拷贝下载下来的Highcharts资源包中的js目录下的highcharts.js文件

3、如果你想使用导出功能,必须引入导出相关的js文件,该文件存在与/Highcharts-2.3.5/js/modules/目录下

<script src="http://code.highcharts.com/modules/exporting.js"></script>

引入下面的三个资源文件后,你就可以参考API文档进行开发了

二、HighCharts结构

通过阅读highCharts API文档,我们知道highCharts的基本结构是:

var chart = new Highcharts.Chart({

chart: {…}

colors: [{…}]

credits: {…}

exporting: {…}

global: {…}

labels: {…}

lang: {…}

legend: {…}

loading: {…}

navigation: {…}

pane: {…}

plotOptions: {…}

series: [{…}]

subtitle: {…}

title: {…}

tooltip: {…}

xAxis: {…}

yAxis: {…}

});

其中只有几个是必须配置的属性,其他无特殊要求默认即可。所以,HighCharts开发,只需要了解每个属性的含义,并有选择的配置需要的效果既可。

时间: 2024-08-28 23:11:21

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

【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

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

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

HighCharts 详细使用及API文档说明

HighCharts 详细使用及API文档说明 2012-11-19 11:18 49574人阅读 评论(2) 收藏 举报  分类: HighCharts 一.HighCharts开发说明: HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下有对齐方式(align),标题文字(text)等.下图为整个图表的每个部分位置说明(请对照下面HighCharts整体结构) 二.HighCha

转: HighCharts 详细使用及API文档说明

一.HighCharts开发说明: HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下有对齐方式(align),标题文字(text)等.下图为整个图表的每个部分位置说明(请对照下面HighCharts整体结构) 二.HighCharts整体结构: 通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载) var chart = new Highchar

HighCharts 具体使用及API文档说明

一.HighCharts开发说明: HighCharts开发实际上配置HighCharts每一个部分,比方配置标题(title),副标题(subtitle)等,当中每一个部分又有更细的參数配置,比方标题下有对齐方式(align),标题文字(text)等.下图为整个图表的每一个部分位置说明(请对比以下HighCharts总体结构) 二.HighCharts总体结构: 通过查看API文档我们知道HighCharts结构例如以下:(API文档在文章后面提供下载) var chart = new Hig

CRL快速开发框架系列教程二(基于Lambda表达式查询)

本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框架系列教程四(删除数据) CRL快速开发框架系列教程五(使用缓存) CRL快速开发框架系列教程六(分布式缓存解决方案) CRL快速开发框架系列教程七(使用事务) CRL快速开发框架系列教程八(使用CRL.Package) CRL快速开发框架系列教程九(导入/导出数据) CRL快速开发框架系列教程十(

C#微信公众号开发系列教程二(新手接入指南)

http://www.cnblogs.com/zskbll/p/4093954.html 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可直接跳过,也欢迎大神吐槽. 目录 C#微信公众号开发系列教程一(调试环境部署) C#微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) 微信公众平台消息接口的工作原理大概可以这样理解:从用户端到公众号端一个流程是这样的,用户发送消息到微信服务器,微

JSqlParser系列之二代码结构(原)

JSqlParser系列之二代码结构(原) 博客园 百味木屋原创,转载请注明出处. 上一篇文章简单介绍如何建立JSqlParser工程,本章对JSqlParser工程的代码结构作大致地介绍. 一.目录结构 JSqlParser的目录结构比较简单,主要有表达式,解析器,语句处理几个目录.下面这张图给出了一个具体的SQL语句与表达式: 接下来,简要介绍一下在JSqlParser中几个抽象概念. 二.SQL语句(statement) JSqlPaser将所有的SQL语句抽象为Statement,Sta