一、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. fatal: Not a valid object name: 'master'.

    fatal: Not a valid object name: 'master'. the answer is : That is again correct behaviour. Until you ...

  2. ActiveMQ_Linux安装(一)

      一.下载:apache-activemq-5.14.0-bin.tar.gz http://activemq.apache.org/activemq-5140-release.html   二.安 ...

  3. 莫比乌斯函数筛法 & 莫比乌斯反演

    模板: int p[MAXN],pcnt=0,mu[MAXN]; bool notp[MAXN]; void shai(int n){ mu[1]=1; for(int i=2;i<=n;++i ...

  4. native2ascii 国际资源文件编码

    将common_zh_CN.properties 转换为 本地文件 common_zh_CN_src.properties native2ascii -reverse common_zh_CN.pro ...

  5. 美化select下拉框

    直接上干货: 需要的材料: change_select.js (文末会给出下载地址) 使用方法: 1.调用方法:<script type="text/javascript" ...

  6. 【USACO 2.2】Party Lamps

    四种开关,n盏灯,1:改变所有灯状态,2:改变奇数灯状态,3:改变偶数灯状态,4:改变3k+1灯状态 给你按开关的总次数c和部分灯限制条件(开或关),一开始都是开着的.($c \leq 10000,n ...

  7. 使用jquery.qrcode生成二维码支持logo，和中文

    /* utf.js - UTF-8 <=> UTF-16 convertion * * Copyright (C) 1999 Masanao Izumo <iz@onicos.co. ...

  8. 【BZOJ-4386】Wycieczki DP + 矩阵乘法

    4386: [POI2015]Wycieczki Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 197  Solved: 49[Submit][Sta ...

  9. 【BZOJ-4281】Związek Harcerstwa Bajtockiego 树上倍增LCA

    4281: [ONTAK2015]Związek Harcerstwa Bajtockiego Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 167  ...

  10. CMMI3标准文档模板大全

    链接:http://pan.baidu.com/s/1c2cGX8W 密码:ulns