一、HighCharts简介

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

 

二、ighCharts的主要特性包括：[1]

1.兼容性：HighCharts采用纯JavaScript编写，兼容当今大部分的浏览器，包括Safari、IE和火狐等等；

2.图表类型：HighCharts支持图表类型，包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等，可以满足各种需求。

3.不受语言约束：HighCharts可以在大多数的WEB开发中使用，并且对个人用户免费，支持ASP，PHP，JAVA，.NET等多种语言中使用。

4.提示功能：HighCharts生成的图表中，可以设置在数据点上显示提示效果，即将鼠标移动到某个数据点上，可以显示该点的详细数据，并且可以对显示效果进行设置。

5.放大功能：HighCharts可以大量数据集中显示，并且可以放大某一部分的图形，将图表的精度增大，进行详细的显示，可以选择横向或者纵向放大。

6.时间轴：可以精确到毫秒。

三、Highcharts 基本组成

四、HighCharts整体结构：

通过查看API文档我们知道HighCharts结构如下：（API文档在文章后面提供下载）

var chart = new Highcharts.Chart({

chart: {…}             // 配置chart图表区

colors: [{...}]         // 配置主体显示颜色（多个线条和柱体的颜色顺序的）

credits: {…}          // 配置右下角版权链接

exporting: {…}        // 配置导出及打印

global: {…}           // Highcharts.SetOptions方法调用

labels: {…}           // HTML标签，可以放置在绘图的任何位置

lang: {…}             // 语言对象属性配置

legend: {…}           // 配置图例选项

loading: {…}          // 配置图表加载选项

navigation: {…}       // 配置导出按钮属性

pane: {…}             // 仅适用于极性图表和角仪表

plotOptions: {…}      // 配置数据点选项

series: [{...}]        // 配置数据列选项

subtitle: {…}         // 配置副标题

title: {…}            // 配置标题

tooltip: {…}          // 配置数据点提示框

xAxis: {…}            // 配置x轴选项

yAxis: {…}            // 配置y轴选项

})

五、HighCharts 实例：

HtmlCode:

<!doctype html>

<html lang="en">

<head>

<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>

<script>

//左侧Javascript代码

</script>

</head>

<body>

<div id="container" style="min-width:700px;height:400px"></div>

</body>

</html>

JavaScript Code

$(function () {

$('#container').highcharts({

title: {

text: 'Monthly Average Temperature',

x: -20 //center

},

subtitle: {

text: 'Source: WorldClimate.com',

x: -20

},

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

},

yAxis: {

title: {

text: 'Temperature (°C)'

},

plotLines: [{

value: 0,

width: 1,

color: '#808080'

}]

},

tooltip: {

valueSuffix: '°C'

},

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'middle',

borderWidth: 0

},

series: [{

name: 'Tokyo',

data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

}, {

name: 'New York',

data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

}, {

name: 'Berlin',

data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

}, {

name: 'London',

data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

}]

});

});

六、HighCharts相关资料：

1.下载地址：http://www.hcharts.cn/product/download.php

2.API文档：http://www.hcharts.cn/api/index.php

HighCharts学习笔记（一）HighCharts入门的更多相关文章

  1. HighCharts学习笔记(二)HighCharts结构及详细配置

    HighCharts结构及详细配置: 一.HighCharts整体结构: 通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载) var chart = new Hi ...

  2. Hadoop学习笔记(1) ——菜鸟入门

    Hadoop学习笔记(1) ——菜鸟入门 Hadoop是什么?先问一下百度吧: [百度百科]一个分布式系统基础架构,由Apache基金会所开发.用户可以在不了解分布式底层细节的情况下,开发分布式程序. ...

  3. iOS学习笔记-地图MapKit入门

    代码地址如下:http://www.demodashi.com/demo/11682.html 这篇文章还是翻译自raywenderlich,用Objective-C改写了代码.没有逐字翻译,如有错漏 ...

  4. tensorflow学习笔记二：入门基础 好教程 可用

    http://www.cnblogs.com/denny402/p/5852083.html tensorflow学习笔记二:入门基础   TensorFlow用张量这种数据结构来表示所有的数据.用一 ...

  5. 学习笔记：Highcharts

    (Highcharts 167K:  ECharts 354K: jqChart 240K),如果用于网络,Highchart最小 Highcharts 功能强大.开源.美观.图表丰富.兼容绝大多数浏 ...

  6. spark学习笔记总结-spark入门资料精化

    Spark学习笔记 Spark简介 spark 可以很容易和yarn结合,直接调用HDFS.Hbase上面的数据,和hadoop结合.配置很容易. spark发展迅猛,框架比hadoop更加灵活实用. ...

  7. Echarts和Highcharts学习笔记01——入门了解

      Echarts是国内百度团队开发的(开源),基于Canvas,适合数据量较大的情况: Highcharts是国外的(商用需授权),基于SVG,方便自己定制,但能使用的图表类型有限: Echarts ...

  8. HighCharts学习笔记

    目录 xAxis自定义时间刻度的显示 xAxis自定义时间刻度 我们先来看下HighCharts图表的xAxis对象有哪些属性(红色标记重要属性): allowDecimals: Booleancat ...

  9. HighCharts学习笔记（一）

    HighChars基本概述 Highcharts是一个纯js写成的插件库,很好的外观表现可以满足任何图标需求. 开始使用chart之前进行配置 全局配置: Highcharts.setOptions( ...

随机推荐

  1. iOS开发,系统自带的分享简单实现

    由于simulator设置里面没有新浪微博的选项,所以选择了真机调试,成功了.代码不多,包含头文件 没有配置登录信息的话,是没有作用的                                 ...

  2. 【BZOJ 3053】The Closest M Points

    KDTree模板,在m维空间中找最近的k个点,用的是欧几里德距离. 理解了好久,昨晚始终不明白那些“估价函数”,后来才知道分情况讨论,≤k还是=k,在当前这一维度距离过线还是不过线,过线则要继续搜索另 ...

  3. 哈希 poj 1480

    计算可能的数目 a3*x3^3+a4*x4^3+a5*x5^5=-(a1*x1^3+a2*x2^3); 列举右边的  结果存到数组  z[i] 和为i的右边等式的数目 如果和小于0  +2500000 ...

  4. C# 对多个集合和数组的操作（合并、去重复、判断）

        例如:List  listA=new List{1,2,4,5,7}List  listB=new List{1,3,6,8} listA.AddRange(listB);List Resul ...

  5. GitHub和SourceTree入门教程

    -->本教程适用于主流的开源网站github和bitbucket,个人认为sourceTree还是比较好用的git客户端,支持windows和mac os. -->soureceTree的 ...

  6. ubuntu 设置 NAT 转发

    针对需求: 嵌入式开发中,经常使用板子和笔记本通过网线直连,如果需要板子连接到外网,就比较尴尬. 最简单方法,可以把板子接到局域网内,我们的笔记本通过局域网交换机连接到板子,可是,这样要很多修改 IP ...

  7. 关于当一个C#工程移植到另一台机子上（win7）上时，程序报错。dll没有被指定在Windows上运行，或者它包含错误。请尝试使用原始安装媒体重新安装程序。。。。。。

    , 解决方法:通过从网上重新下载dll文件 拷贝到报错的目录下,替换掉原有的dll,可以正确运行.

  8. hihoCoder #1379 Emulator

    hihoCoder Challenge 23, Prob. A 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 有一个\(n\)个点的无向正权图\(G\),这个图是连通的, ...

  9. wireshark过滤语法总结-重点偏移过滤

    http://chenjiji.com/post/3371.html 作者: CHAN | 发布: 2013 年 10 月 24 日 做应用识别这一块经常要对应用产生的数据流量进行分析. 抓包采用wi ...

  10. Ubuntu学习总结-02 Ubuntu下的FTP服务的安装和设置

    一 安装vsftpd 在安装前vsftpd,先更新apt-get下载的数据源输入如下命令: sudo apt-get update 然后安装vsftpd sudo apt-get install vs ...