一、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. 一个很好的UML工具

    访问地址:www.visual-paradigm.com 工具使用帮助文档地址: http://www.visual-paradigm.com/support/documents/vpumluserg ...

  2. zabbix的使用

    1,zabbix运行流程 2功能特性 1数据收集 2灵活触发器 3高度可定制告警 4实时绘图功能 5web监控能力 6多种可视化展示 7历史数据存储 8配置容易 9API功能 10.......... ...

  3. Asp.Net MVC<一> : 三层架构、MVC

    MVC.MVP.MVVM.Angular.js.Knockout.js.Backbone.js.React.js.Ember.js.Avalon.js.Vue.js 概念摘录 认清Android框架 ...

  4. lift and throw

    import java.util.*; import java.math.*; public class Main { public static void main(String[] args) { ...

  5. C++编译期多态与运行期多态

    前言 今日的C++不再是个单纯的"带类的C"语言,它已经发展成为一个多种次语言所组成的语言集合,其中泛型编程与基于它的STL是C++发展中最为出彩的那部分.在面向对象C++编程中, ...

  6. restController与Controller-待续

    restController包含controller和responseBody, restController返回一个对象时,会自动转换成json格式的数据,如果要返回视图和对象的那只能用contro ...

  7. HDU2222 Keywords Search

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  8. CVE-2015-1328 Ubuntu 12.04, 14.04, 14.10, 15.04 overlayfs Local Root

    catalog . 引言 . Description . Effected Scope . Exploit Analysis . Principle Of Vulnerability . Patch ...

  9. static和public的区别

    static:静态.   可以设置:静态类.静态变量.静态方法.   没有使用static修饰的成员为实例成员. 静态成员的使用:通过类名.   1.不加static修饰的成员是对象成员,归每个对象所 ...

  10. 使用dnsmasq来提升CentOS上网速度

    1. 安装dnsmasq dnsmasq的官方网址是:http://www.thekelleys.org.uk/dnsmasq/doc.html.利用里面的下载链接下载dnsmasq-2.72.tar ...