highcharts插件的简单应用,非常全能好用的一个数据统计表插件。

$(function () {
$('#container').highcharts({
chart:{
type:"line" ,//折线图
// type:"pie",饼状图
// type:"colum"柱状图
},
title: {
align:"center",//水平居中
text: '大标题',//位于最上面的大标题
x: -20 ,//进行x微调
y:20,//进行y微调
floating:false//是否浮动
},
subtitle: {
align:"center",//水平居中
text: '小标题',//位于大标题下方的小标题
x: -20,//进行x微调
y:0,//进行y微调
floating:false//是否浮动
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],//X轴
max:null,//最大值
min:null,//最小值
title:{
text:"x轴标题"
}
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{//一条分化线
value: 1,//位于那些值
width: 1,//多宽
color: '#000'//什么颜色
}]
},
tooltip: {
valuePrefix:".",//位于值之前
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]
}]
});
});

  

上方代码最终形成以上数据统计图,有非常多的功能其余功能,自己上官网可以看--http://www.hcharts.cn/--

数据统计表插件,highcharts插件的简单应用的更多相关文章

  1. 图表插件——Highcharts插件的使用(一柱状图)

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

  2. 图表插件Highcharts的动态化赋值,实现图表数据的动态化设置显示

    在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...

  3. highcharts插件使用总结和开发中遇到的问题及解决办法

    这里使用的highchart是2014-01-09从官网下载的版本,版本号是3.0.8, 当过了几天后,发现版本号变成了3.0.9,不由得的感叹highchart的版本更新之快. 在jsp中使用hig ...

  4. 实时更新数据的jQuery图表插件DEMO演示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. postman插件的安装以及简单介绍

    1:postman是干什么的? Postman官网上这么介绍的:“Modern software is built on APIs,Postman helps you develop APIs fas ...

  6. 查看SQLSERVER内部数据页面的小插件Internals Viewer

    原文:查看SQLSERVER内部数据页面的小插件Internals Viewer 查看SQLSERVER内部数据页面的小插件Internals Viewer 感觉internals viewer这个名 ...

  7. 移动端下滑刷新插件(jQuery插件)

    由于在工作不能独自开发,而且为了给他们方便,自己写过不少的插件,不过今天刚好空闲,发出刚好完成的,移动端的下滑到底刷新插件.我不是很喜欢写插件给别人用,因为用起来自然是简单的,没什么难度,所以一起分享 ...

  8. 浅谈异步上传插件 jquery-file-upload插件

    当我们需要异步上传文件的时候,我们倾向于在网上查找相关的JQuery插件,jquery-file-upload就是我们经常看到的,但是他的主页是英文的,对于我们这些英语比较差的同学来说,简直就是... ...

  9. vue路由的跳转-路由传参-cookies插件-axios插件-跨域问题-element-ui插件

    ---恢复内容开始--- 项目初始化 创建一个纯净的vue环境项目,手动书写全局的样式配置,全局的main,js配置 (1)如果vue项目在重构或者出错的时候,手动安装node_modules. 如果 ...

随机推荐

  1. 10月16日下午MySQL数据库CRUD操作(增加、删除、修改、查询)

    1.MySQL注释语法--,# 2.2.后缀是.sql的文件是数据库查询文件. 3.保存查询. 关闭查询时会弹出提示是否保存,保存的是这段文字,不是表格(只要是执行成功了表格已经建立了).保存以后下次 ...

  2. 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【三】——Web Api入门

    系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 经过前2节的介绍,我们已经把数据访问层搭建好了,从本章开始就是Web Api部分了.在正式开 ...

  3. HTTP2.0介绍

    HTTP2.0的所有通信都是在一个TCP连接上完成的. 1.信息传输术语 1.1 流 虚拟信道,可以承载双向消息,每个流都有一个唯一的整数标识符(1.2....N); 1.2 消息 逻辑上的HTTP消 ...

  4. js 连接地址分析

    html的连接地址 <a href="/yzh/mobile/index.php?m=default&c=user&a=order_list&cla=dfk&q ...

  5. draw9的使用说明

    转载来自:http://isux.tencent.com/android-ui-9-png.html 在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以 ...

  6. java语言一维数组,对象数组

    /** * 对象数组的使用 */package com.test5; import java.io.BufferedReader;import java.io.InputStream;import j ...

  7. 图书管理系统——APP平台开发

    http://www.w3school.com.cn/php/ 初步计划采用PHP 开发网站. 一定要独立建立一套图书管理系统, 尤其唯一性质的概念,整合,甚至中英文图书概念的而整合.一本书一个页. ...

  8. gradle providedCompile 与compile区别

    Gradle compile: 如果你的jar包/依赖代码 在编译的时候需要依赖,在运行的时候也需要,那么就用compile例如 : compile 'org.springframework.boot ...

  9. TableView的执行流程 & 位移枚举

    // 闲来无聊测试一下 第一轮: 1.numberOfSectionsInTableView    :假如section=2,此函数只执行一次,假如section=0,下面函数不执行,默认为1 2.h ...

  10. 如何清理WindowsXp的临时文件

    软件限制策略中的 "路径规则" 不允许的, 是指在 这个路径中的程序都 不准运行! 这就限制了 : 通常电脑中病毒, 都是通过上网感染病毒的 -> 病毒/恶意软件通过 &qu ...