jquery图表插件morris.js参数详解和highcharts图表插件
一、morris.js
优点:轻巧、简单好用
缺点:没highcharts功能多,常用的足以
网址:http://morrisjs.github.io/morris.js/
核心代码
1、head调用js
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="/js/jquery-1.4.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
2、添加元素
<div id="myfirstchart" style="height:250px;"></div>
3、js代码
<script type="text/javascript" language="javascript">new Morris.Line({
element: 'myfirstchart',
data: [
{ day: "2016-07-10", value: 120 },
{ day: "2016-07-11", value: 10 },
{ day: "2016-07-12", value: 5 },
{ day: "2016-07-13", value: 50 },
{ day: "2016-07-14", value: 20 }
],
// The name of the data record attribute that contains x-values.
xkey: 'day',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['阅读量'],
parseTime:false //注意
});
</script>
ajax例子:
function yizhou()
{
if($("#myfirstchart").text()=="")
{
$.post("newsCountAjax.aspx",{type:0},function(datas){
var dataObj=eval("("+datas+")");//转换为json对象
//1周
new Morris.Line({
element: 'myfirstchart',
data: dataObj,
xkey: 'day',
ykeys: ['value'],
labels: ['阅读量'],
parseTime:false
});
});
}
}
yizhou();
参数说明:
1 |
element(必填) |
未公開的參數選項說明:
1 |
marginTop(必填) |
二、highcharts
优点:功能多,强大
缺点:功能太多,有版权等
网址:http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/
jquery图表插件morris.js参数详解和highcharts图表插件的更多相关文章
- jquery图片切换插件jquery.cycle.js参数详解
转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...
- jQuery()方法的第二个参数详解
关于jQuery()方法的第二个参数,有下面这几种用法: 1.jQuery(selector, [context]) 这种用法,相当于 $(context).find(selector) 或者 con ...
- jquery ajax 方法及各参数详解
1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type ...
- 关于bootstrap-datetimepicker 插件的配置参数详解
本人在网上查找的, 觉得还不错,就抄过来了... 有错误大家一起讨论,谢谢... 原地址是:http://www.bootcss.com/p/bootstrap-datetimepicker/ 项目 ...
- HTML5视频播放插件Video.js使用详解
一.Video.js简介 Video.js 是一个开源的 Html5 jquery 视频插件,这个插件可以用来处理 Flash 视频,它还是一个多平台支持的产品. Moreover,YouTube,V ...
- cookie插件|jq-cookie.js|使用详解
1.设置一二级域名共用的cookie:设置domain为一级域名,可一.二级域名共用的cookie $.cookie('f_city','北京|101010100|,锦州|101070701|',{e ...
- 【Jquery系列】JqGrid参数详解
1 概述 本篇文章主要与大家分享JqGrid插件参数问题. 2 参数详解 2.1 初始化参数 2.2 ColModel参数 3 json数据 jqGrid可支持的数据类型:xml.jso ...
- HTML滚动字幕代码参数详解及Js间隔滚动代码
html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...
- ajax方法参数详解与$.each()和jquery里面each方法的区别
JQuery中$.ajax()方法参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为g ...
随机推荐
- 发现一个很好的android开发笔记库
http://linux.linuxidc.com/ 密码和用户名都是www.linuxidc.com android基础教程到高手进阶,游戏开发,数据存储,android架构等.谢谢网站主分享!
- cmd下windows批处理,获取当前系统时间,生成日志文件名
示例: rdGetRTData_log%date:~0,4%%date:~5,2%%date:~8,2%.txt 生成格式: rdGetRTData_log20151103.txt 编写Windows ...
- PHP中应用Service Locator服务定位及单例模式
单例模式将一个对象实例化后,放在静态变量中,供程序调用. 服务定位(ServiceLocator)就是对象工场Factory,调用者对象直接调用Service Locator,与被调用对象减轻了依赖关 ...
- HDU 2121 Ice_cream’s world II 不定根最小树形图
题目链接: 题目 Ice_cream's world II Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Ja ...
- EXT经验--在调试中通过查看handler的第一个参数的xtype得知该参数信息及该handler的归属
EXT模拟了OPP的思想,因此很多问题可以像JAVA语音那样去思考它.在实际阅读EXT时,常常需要我们搞清楚某个函数.某个对象的归属.如某个参数变量.方法属于哪个类,如下: 这是我今天在群中发出的问题 ...
- 使用函数的递归调用来解决Hanoi(汉诺)塔问题。
#include<stdio.h> void hanoi(int n, char x, char y, char z); void move(char x, char y); int ti ...
- Unity3D研究院之IOS全自动打包生成ipa
接着上一篇文章, 自动生成framework,这篇文章我把shell自动化打包ipa整理了一下,希望大家喜欢,嘿嘿.. 建议大家先看一下上一篇文章.http://www.xuanyusong.com/ ...
- HDU4276 The Ghost Blows Light SPFA&&树dp
题目的介绍以及思路完全参考了下面的博客:http://blog.csdn.net/acm_cxlove/article/details/7964739 做这道题主要是为了加强自己对SPFA的代码的训练 ...
- 【QT】视频播放+文件选择
折腾了两个小时,太久没用了,找了半天的感觉. 先是在视频播放 的代码基础上加选择视频的按钮,开始总是显示两个框,后来发现需要用QSplitter来实现同时有多个框的情况. 把中心窗口设为这个split ...
- 关于dynamic_cast
http://www.groad.net/bbs/read.php?tid-5476.html dynamic_cast 进行运行时强制转换.如果在执行时转换非法,则会转换失败.dynamic_cas ...