Morris 轻量级 图表
Morris.js 是基于 jQuery 和 Raphaël 的轻量级矢量图形库,帮助开发人员轻松绘制各种形式的图表。示例:
HTML:
<div id="myfirstchart" style="height: 250px;"></div>
JavaScript:
new Morris.Line({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// 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: ['Value']
});
依赖类库:
- jQuery >=1.7
- Raphaël >=2.0
支持浏览器:
- IE6+
- Safari/Chrome/Firefox
- iOS 3+
- Android 3+
如何使用?
morris.js的使用很简单,你只需要使用一个方法:
Morris.Line(options)
选项:
- element(必选): 用来插入图形的元素 (注意:这个元素必须宽度和高度定义在自己的样式表里)
- data(必选):用来绘图的数据,可以使对象数组,包含了x和y轴属性(注意:排序在这里不重要,你可以按你的需要随意的排序)
- xkey (必选):包含了X轴属性名字,支持如下格式:2012, 2012 Q1, 2012-02, 2012-02-24.
- ykeys (必选):一个包含Y值的属性名称,每一个对应一个绘制的数据
- labels (必选): 一个包含数据序列名称的标识(对应ykeys选项的值)
- lineWidth (可选): 序列线宽度
- pointSize (可选): 序列点直径
- lineColors (可选): 序列线/点的颜色数组
- ymax (可选): Y数值的最大值,或者你可以设置为"auto"或者"auto[数值]",保证最小必须为指定数值
- smooth (可选): false则禁止光滑处理
代码:
// annual data
Morris.Line({
element: 'annual',
data: [
{y: '2012', a: 100},
{y: '2011', a: 75},
{y: '2010', a: 50},
{y: '2009', a: 75},
{y: '2008', a: 50},
{y: '2007', a: 75},
{y: '2006', a: 100}
],
xkey: 'y',
ykeys: ['a'],
labels: ['Series A']
});
研究下面的例子:
Morris.Bar({
element: 'bar-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
ykeys可以有多个值,而每个值对应labels的名称!
Morris 轻量级 图表的更多相关文章
- iOS 资源大全
这是个精心编排的列表,它包含了优秀的 iOS 框架.库.教程.XCode 插件.组件等等. 这个列表分为以下几个部分:框架( Frameworks ).组件( Components ).测试( Tes ...
- IOS中文版资源库
Swift 语言写成的项目会被标记为 ★ ,AppleWatch 的项目则会被标记为 ▲. [转自]https://github.com/jobbole/awesome-ios-cn#librari ...
- 墙裂推荐 iOS 资源大全
这是个精心编排的列表,它包含了优秀的 iOS 框架.库.教程.XCode 插件.组件等等. 这个列表分为以下几个部分:框架( Frameworks ).组件( Components ).测试( Tes ...
- 爆炸!iOS资源大礼包(持续更新...)
今天为大家整理了一些关于iOS学习的干货,献给正在奋斗的你们,首先声明一下,在整理的过程中参考了大量的博客和文章,知识的分享终究会增值,在此表示感谢,希望这篇文章给大家带来帮助. 基础部分: C语言教 ...
- Android 自定义view --圆形百分比(进度条)
转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50334595 注:本文由于是在学习过程中写的,存在大量问题(overdraw onDr ...
- 【Visual Studio 扩展工具】使用 ComponentOne迷你图控件,进行可视化数据趋势分析
概述 迷你图 —— Sparklines是迷你的轻量级图表,有助于快速可视化数据. 它们是由数据可视化传奇人物Edward Tufte发明的,他将其描述为“数据密集,设计简单,字节大小的图形.”虽然迷 ...
- iOS 资源大全整理
这是个精心编排的列表,它包含了优秀的 iOS 框架.库.教程.XCode 插件.组件等等. 这个列表分为以下几个部分:框架( Frameworks ).组件( Components ).测试( Tes ...
- 轻量级的绘制图表js库--Morris.js
Morris.js 是一个轻量级的 JS 库,使用 jQuery 和 Raphaël 来生成各种时序图. 虽说现在移动手机网络已经到了4G,但是在移动web客户端开发过中,为了达到良好的体验效果,需要 ...
- 一款免费的js图表工具--morris
前段时间需要使用免费的图表工具做报表,同事提及了一款图表工具morris.官方网站: http://www.oesmith.co.uk/morris.js/ 该插件遵循BSD协议,可以用于商业软件,也 ...
随机推荐
- spring boot打包后在tomcat无法访问静态资源问题
我的spring boot项目中前端页面的资源引用 我的静态文件夹是 我的application.yml中资源路径配置了 同时我在WebMvcConfig中配置了addResourceHandlers ...
- 前端自动化之路之gulp,node.js
随着现在前端技术的不断发展,和各个公司对前端项目开发更新速度的要求,前端自动化越来越受到大家的重视,之前传统的前端开发方式已经越来越不能满足开发的需求了,于是各种自动化工具随之产生了.而gulp就是其 ...
- Linux 在主要的搜索命令和视图的信息
查找命令和硬件信息查看的日常系统管理.最常见的维护操作. 继 Linux 基本查找命令做一个简单的比较.并列出了一些硬件信息经常使用的视图命令. man 经常使用选项 -k 知道功能.不知道名称 -f ...
- 卷积神经网络(CNN)的细节问题(滤波器的大小选择)
0. 滤波器的大小选择 大部分卷积神经网络都会采用逐层递增(1⇒ 3 ⇒ 5 ⇒ 7)的方式. 每经过一次池化层,卷积层过滤器的深度都会乘以 2: 1. 权值共享:减轻过拟合 & 降低计算量 ...
- switch语句中default用法详解
当年学C语言switch开关语句的时候,很多人会告诉你它是这么用的: switch(表达式){ case常量表达式1: 语句1;break; case常量表达式2: 语句2;break; - case ...
- android 创建一个新的每次project什么时候 请问自己主动 参加 V7依赖?
android 创建一个新的每次project什么时候 请问自己主动 参加 V7依赖? 分析原因: 主要是由于.我之前的 SDK 的版本号 更新的有点高了.低版本号是不会有这样的问题g的,新版本号中g ...
- 实现在 .net 中使用 HttpClient 下载文件时显示进度
在 .net framework 中,要实现下载文件并显示进度的话,最简单的做法是使用 WebClient 类.订阅 DownloadProgressChanged 事件就行了. 但是很可惜,WebC ...
- Mybatis 入门到理解篇
MyBatis MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code, ...
- C#实现通过拼多多分享微信公众号实现查询优惠券、佣金比率
主要实现功能:关注公众号的用户发送拼多多商品链接,后台程序通过链接查找商品优惠券或返佣情况. 说明:使用了niltor 封装的拼多多接口 github地址 ,但是需要注意可能会存在返回模型无法正确解析 ...
- OpenCV图像修复
在OpenCV的"photo.hpp"中定义了一个inpaint函数,可以用来实现图像的修复和复原功能,inpaint函数的原型如下: void inpaint( InputArr ...