Highcharts图表控件是眼下使用最为广泛的图表控件。本文将从零開始逐步为你介绍Highcharts图表控件。

通过本文。你将学会怎样配置Highcharts以及动态生成Highchart图表。

Highcharts是一个很流行。界面美观的纯Javascript图表库。它主要包含两个部分：Highcharts和Highstock。  Highcharts能够为您的站点或Web应用程序提供直观，互动式的图表。

眼下支持线，样条。面积，areaspline，柱形图。条形图，饼图和散点图类型。  Highstock能够为您方便地建立股票或一般的时间轴图表。它包含先进的导航选项，预设的日期范围。日期选择器，滚动和平移等等。

Highcharts简单案例：

页面index.html代码

<!doctype html>

<html>

<head>

<meta charset="gb2312">

<title>数据统计</title>

<body>

	<div class="depmeting_charts" style="width: 100%; height: 400px"></div>

</body>

<script src="../js/jquery-1.10.2.js"></script>

<script src="../js/highcharts/highcharts.js"></script>

<script src="../js/leaddesktop/data.js"></script>

</html>

data.js的代码：

$(function () {

    $('.depmeting_charts').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有一个类似bootstrap的站点，我们仅仅须要拷贝对应的代码，即能够实现我们想要的效果：

Highcharts的中文案例站点：http://www.hcharts.cn/demo/index.php

         Highstock的中文案例站点：http://www.hcharts.cn/demo/highstock.php

本文也是起到一个抛砖引玉的作用。假设想深入研究Highcharts。能够參考一下两个站点：

http://www.highcharts.com/

http://www.hcharts.cn/

Highcharts图表插件的简单使用说明的更多相关文章

  1. HighCharts 图表插件 自定义绑定 时间轴数据

    HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...

  2. jQuery HighchartsTableHTML表格转Highcharts图表插件

    版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highc ...

  3. highcharts图表插件初探

    转载请注明出处:http://www.cnblogs.com/liubei/p/highchartsOption.html HighCharts简介 Highcharts 是一个用纯JavaScrip ...

  4. highcharts 图表库的简单使用

    Highcharts简介: Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图 ...

  5. jquery图表插件morris.js参数详解和highcharts图表插件

    一.morris.js 优点:轻巧.简单好用 缺点:没highcharts功能多,常用的足以 网址:http://morrisjs.github.io/morris.js/ 核心代码 1.head调用 ...

  6. 百度图表插件echart简单应用，简单配置一些要显示的样式及种类

    从echart官网下载js,然后引入jq即可运行.足够简单应用了 关键词:echart控制:图标标题.数据标题.折线图.柱状图切换按钮.恢复刷新图表按钮.保存为图片按钮.坐标系控制.坐标数据.坐标倾斜 ...

  7. 数据统计表插件，highcharts插件的简单应用

    highcharts插件的简单应用,非常全能好用的一个数据统计表插件. $(function () { $('#container').highcharts({ chart:{ type:" ...

  8. 纯JavaScrip图表插件——Highcharts

    简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.目前H ...

  9. 图表插件——Highcharts插件的使用（一柱状图）

    1.下载Highcharts插件 官方下载网址:http://www.highcharts.com/download 2.引入需要的js文件 <script src="~/Script ...

随机推荐

  1. 路飞学城Python-Day14(practise)

    本章总结 练习题 1.logging模块有几个日志级别? 5个,按级别从高到低分别是 CRITICAL(灾难)>ERROR(错误)>WARNING(警示)>INFO(信息)>D ...

  2. React中的AES加解密请求

    引言 在我们使用React开发Web前端的时候,如果是比较大的项目和正常的项目的话,我们必然会用到加解密,之前的文章中提到.NET的一些加解密,那么,这里我就模拟一个例子: 1.后台开发API接口,但 ...

  3. luogu P4062 [Code+#1]Yazid 的新生舞会（线段树+套路）

    今天原来是平安夜啊 感觉这题是道好题. 一个套路枚举权值\(x\),把权值等于\(x\)的设为1,不等于的设为-1,然后问题转化为多少个区间权值和大于. 发现并不是很好做,还有一个套路,用前缀和查分来 ...

  4. 'Upgrade' header is missing

    spring-websocket 握手失败是因为 有拦截器  注释掉拦截器就OK

  5. weak和alias

    一.强符号和弱符号 在C语言中,如果多个模块定义同名全局符号时,链接器认为函数和已初始化的全局变量(包括显示初始化为0)是强符号,未初始化的全局变量是弱符号. 根据这个定义,Linux链接器使用下面的 ...

  6. 题解 P2657 【[SCOI2009]windy数】

    感觉数位DP有点弱,强化一下... 这道题是一道比较裸的数位DP. 我们用\(dp[i][j]\)表示长度为\(i\)最高位为\(j\)的windy数有多少个,状态转移方程为\(dp[i][j]=\s ...

  7. 洛谷—— P2663 越越的组队

    https://www.luogu.org/problem/show?pid=2663 题目描述 班级要组织一场综合能力竞赛,全班同学(N个,N是偶数)分成两队互相竞争.老师找到了越越并给了越越一张全 ...

  8. Android图片旋转,缩放,位移,倾斜,对称完整演示样例(一)——imageView.setImageMatrix(matrix)和Matrix

    MainActivity例如以下: import android.os.Bundle; import android.view.MotionEvent; import android.view.Vie ...

  9. JS 去除字符串中的最后一个字符

    var str = 'Hello World!'; str = str.substr(0,str.length-1); alert(str);

  10. form表单系列中文件上传及预览

    文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.j ...