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实例在被创建之前都要经过一系列的初始化过程,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,这个过程就是vue的生命周期. 1 vue生命周期图 {: ...

  2. HDU 4725 The Shortest Path in Nya Graph

    he Shortest Path in Nya Graph Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged o ...

  3. 洛谷 P2049 魔术棋子

    P2049 魔术棋子 题目描述 在一个M*N的魔术棋盘中,每个格子中均有一个整数,当棋子走进这个格子中,则此棋子上的数会被乘以此格子中的数.一个棋子从左上角走到右下角,只能向右或向下行动,请问此棋子走 ...

  4. 9种常见的Android开发错误及解决方案

    整理总结了9个Android开发中的错误以及解决方案,共同探讨进步! 1. 如果你的项目的R文件不见的话,可以试下改版本号在保存,R文件不见一般都是布局文本出错导致. 2. 布局文件不可以有大写字母 ...

  5. 改动Android设备信息，如改动手机型号为iPhone7黄金土豪版！

    首先你的手机必需要有ROOT权限,误操作有风险需慎重 请先开启手机的USB调试,防止手机改动后无法启动时导致的无法修复 1.假设你是在手机上改动,直接使用RE文件管理器,编辑/system/build ...

  6. Android体验高扩展艺术般的适配器

    前言 本篇文章带大家体验一下一种具有扩展性的适配器写法. 这个适配器主要用于Item有多种的情况下.当然仅仅有一种类型也是适用的 实现 毫无疑问我们要继承BaseAdapter,重写getCount, ...

  7. JavaScript加密解密7种方法

    注:本文纯转贴,供学习使用 本文一共介绍了七种javascript加密方法: 在做网页时(其实是网页木马呵呵),最让人烦恼的是自己辛辛苦苦写出来的客户端IE运行的javascript代码常常被别人轻易 ...

  8. layer是什么

    layer是什么 总结 layer就是一个web弹框 简介 layer是一款web弹层组件,致力于服务各个水平段的开发人员. 可以让你想到即可做到的web弹窗 概述 [1]  layer,一个可以让你 ...

  9. 熟悉了下HTTP协议

    HTML是一种用来定义网页的文本,会HTML,就可以编写网页: HTTP是在网络上传输HTML的协议,用于浏览器和服务器的通信.200表示一个成功的响应,后面的OK是说明.失败的响应有404 Not ...

  10. iOS菜鸟成长笔记（3）——斯坦福公开课学习（1）

    一.iOS四层结构 1.Core OS 是用FreeBSD和Mach所改写的Darwin, 是开源.符合POSIX标准的一个Unix核心.这一层包含或者说是提供了整个iPhone OS的一些基础功能, ...