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. 运维派 企业面试题4&5 创建10个 用户 ; ping探测主机是否在线

    Linux运维必会的实战编程笔试题(19题) 企业面试题4: 批量创建10个系统帐号oldboy01-oldboy10并设置密码(密码为随机8位字符串). #!/bin/bash # ;i<=; ...

  2. ListNode的python 实现

    class Node(object): def __init__(self): self.val = None self.next = None class Node_handle(): def __ ...

  3. kissy延迟加载demo

    <!doctype html><html><head>    <meta charset="gbk"/>    <title& ...

  4. input标签type为number时，输入小数，在Firefox浏览器上输入框标红的问题

    问题一:firefox 下 默认情况 <input   type="number"> 只允许输入整数,输入小数时会报错,输入框被标红 这时候可以添加参数 step=&q ...

  5. PHP设计模式（三）抽象工厂模式（Abstract Factory）

    一.什么是抽象工厂模式 抽象工厂模式的用意为:给客户端提供一个接口,可以创建多个产品族中的产品对象 ,而且使用抽象工厂模式还要满足以下条件: 系统中有多个产品族,而系统一次只可能消费其中一族产品. 同 ...

  6. Vue内置指令

    v-text 类型: string用法: 更新元素的 textContent.如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值. v-html 类型: stri ...

  7. python学习（二）：基本数据类型：整型，字符型

    整型: type():显示数据类型 # 整型,int # python3里,不管数字有多大,都是int类型 # python2里,有大小区分,长整型:long int a = " print ...

  8. pandas 6 合并数据 concat， append 垂直合并，数据会变高/长

    from __future__ import print_function import pandas as pd import numpy as np concatenating # ignore ...

  9. Android数据分批载入-滑动究竟部自己主动载入列表

    Android数据分批载入-滑动究竟部自己主动载入列表 2014年5月9日 摘自:<Android高级开发实战-ui.ndk与安全> 本博文介绍怎样进行数据分批载入,在应用开发其中会常常使 ...

  10. Swift学习笔记（二）——常量与变量

    这篇博客将会学习到Swift中的常量Constants和变量Variable.这是学习语言的基础.当中能够看到Swift每句后面基本都是没有:分号的,假设有加:分号的习惯,也能够加上. (1)常量声明 ...