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. JDOM,dom4j方式解析XML

    <?xml version="1.0" encoding="UTF-8"?> <dataSources> <!-- 定义MySQL ...

  2. 紫书 例题11-4 UVa247 （Floyd判断联通）

    Floyd联通, 然后为了输出联通分量而新建一个图, 让互相可以打电话的建立一条边, 然后dfs输出联通分量就ok了. #include<cstdio> #include<iostr ...

  3. 【剑指Offer学习】【面试题47：不用加减乘除做加法】

    题目:写一个函数,求两个整数之和,要求在函数体内不得使用+.-.×.÷四则运算符号. 解题思路 5 的二进制是101, 17 的二进制是10001 .还是试着把计算分成三步:第一步各位相加但不计进位. ...

  4. glm编译错误问题解决 formal parameter with __declspec(align(&#39;16&#39;)) won&#39;t be aligned

    參考:http://stackoverflow.com/questions/25300116/directxxmmatrix-error-c2719-declspecalign16-wont-be-a ...

  5. (数据结构整理)NJUPT1054

    这一篇博客以一些OJ上的题目为载体,整理一下数据结构.会陆续的更新. .. 我们都知道,数据结构的灵活应用有时能让简化一些题目的解答. 一.栈的应用 1.NJUPT OJ 1054(回文串的推断) 回 ...

  6. Windows API Hook

    原文地址:http://blog.sina.com.cn/s/blog_628821950100xmuc.html 原文对我的帮助极大,正是由于看了原文.我才学会了HOOK.鉴于原文的排版不是非常好, ...

  7. linux下修改完profile文件的环境变量后如何立即生效

    方法1: 让/etc/profile文件修改后立即生效 ,可以使用如下命令: # . /etc/profile 注意: . 和 /etc/profile 有空格 方法2: 让/etc/profile文 ...

  8. 2.安装 CLI和CLI的工作原理

    转自:https://www.gruntjs.net/getting-started 还在使用 Grunt 0.3 版本吗?请查看 Grunt 0.3 注意事项 在继续学习前,你需要先将Grunt命令 ...

  9. ModelForm views.py

    from django.shortcuts import render from django import forms from django.forms import fields from ap ...

  10. HibernateProperties 配置属性

    Hibernate properties Hibernate配置属性 属性名 用途hibernate.dialect ;一个Hibernate Dialect类名允许Hibernate针对特定的关系数 ...