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. Vue 基础篇

    Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...

  2. matplotlib bar函数重新封装

    参考: https://blog.csdn.net/jenyzhang/article/details/52047557 https://blog.csdn.net/liangzuojiayi/art ...

  3. Hello World FastCGI

    什么是FastCGI,google吧,測试一个用C++实现的FastCGI程序. 1, Nginx 安装.http://nginx.org/en/download.html.下载解压.configur ...

  4. RvmTranslator for Linux

    RvmTranslator for Linuxeryar@163.com RvmTranslator can translate the RVM file exported by AVEVA Plan ...

  5. nj10---文件读取

    介绍:fs模块是文件操作的封装,它提供了文件的读取,写入,更名,删除,遍历目录,链接POSIX文件系统操作.与其他模块不同的是,fs模块中所有的操作都提供了异步和同步两个版本,例如读取文件内容函数异步 ...

  6. Java中泛型的各种使用

    Java中的泛型的使用: 1.普通的泛型使用 在使用类的时候后面的<>中的类型就是我们确定的类型. public class MyClass1<T> {//此处定义的泛型是T ...

  7. zzulioj--1805-- SC和ta的游泳池(简单几何)

    1805: SC和ta的游泳池 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 154  Solved: 43 SubmitStatusWeb Boar ...

  8. 远程登录工具 —— filezilla（FTP vs. SFTP）、xshell、secureCRT

    filezilla:是一个免费开源的 FTP 软件,分为客户端版本和服务器版本,具备所有的 FTP 软件功能. 支持的协议:FTP & SFTP(Secure File Transfer Pr ...

  9. rest_framework-节流-总结完结篇

    列表从后往前读 #1.在request中获取IP#2.访问记录 VISIT_RECORD = {} 放缓存 数据库 都可以 建议缓存import timeclass VisitThrottle(obj ...

  10. iOS中关于字符 “&”的作用？

    如NSFileManager中关于判断是否目录的 iOS中关于字符 "&"的作用? >> ios这个答案描述的挺清楚的:http://www.goodpm.ne ...