Morris图表使用小记
挺好用的,碰到几个问题,有的是瞎试解决了的:
1、我想折线图能够响应单击事件,即点击某个节点后,就能加载进一步的信息,帮助没找到,参照另外一个地方的写法,居然支持事件
Morris.Line({
element: 'graph',
data: year_data,
xkey: 'period',
ykeys: ['zhichu', 'shouru'],
labels: ['支出', '收入'],
parseTime: false,
lineColors:['#0000ff', '#ff0000'],
gridTextSize:24,
hoverFontSize:24
}).on('click', function(i, row){
$.ajax({ url: "GetMonth.aspx?Year="+$("#DropDownList1").val()+"&Mon="+i,
success: function(data){
var obj = JSON.parse(data)
loadMonth(obj.mon)
}});
});
2、文字大小调整,hoverFontSize,设置了不太管用,有些浏览器支持有些不行,关键是,微信小程序的浏览器不行,于是改了两个地方:
1)morris.css中的样式,改了似乎用处不大
2)分析页面,找到样式,直接用jquery设置
$(".morris-hover morris-default-style").css({"font-size":"24px"});
大概效果如下,手机中看起来不错。

我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan
Morris图表使用小记的更多相关文章
- 简洁AngularJS框架后台管理系统bootstrap后台模板
最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...
- 一款免费的js图表工具--morris
前段时间需要使用免费的图表工具做报表,同事提及了一款图表工具morris.官方网站: http://www.oesmith.co.uk/morris.js/ 该插件遵循BSD协议,可以用于商业软件,也 ...
- Morris 轻量级 图表
Morris.js 是基于 jQuery 和 Raphaël 的轻量级矢量图形库,帮助开发人员轻松绘制各种形式的图表.示例: HTML: <div id="myfirstchart&q ...
- 时间作为横轴的图表(morris.js)超越昨天的自己系列(8)
超越昨天的自己系列(8) morris.js的官网有详细的例子:http://www.oesmith.co.uk/morris.js/ 特别注意它的依赖: <link rel="sty ...
- jquery图表插件morris.js参数详解和highcharts图表插件
一.morris.js 优点:轻巧.简单好用 缺点:没highcharts功能多,常用的足以 网址:http://morrisjs.github.io/morris.js/ 核心代码 1.head调用 ...
- 轻量级的绘制图表js库--Morris.js
Morris.js 是一个轻量级的 JS 库,使用 jQuery 和 Raphaël 来生成各种时序图. 虽说现在移动手机网络已经到了4G,但是在移动web客户端开发过中,为了达到良好的体验效果,需要 ...
- 【MVVMLight小记】二.开发一个简单图表生成程序附源码
上一篇文章介绍了怎样快速搭建一个基于MVVMLight的程序http://www.cnblogs.com/whosedream/p/mvvmlight1.html算是简单入门了下,今天我们来做一个稍许 ...
- Morris.js和flot绘制折线图的比较
[文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的 ...
- ConCurrent in Practice小记 (1)
ConCurrent in Practice小记 (1) 杂记,随书自己写的笔记: 综述问题 1.线程允许在同一个进程中的资源,包括共享内存,内存句柄,文件句柄.但是每个进程有自己的程序计数器,栈和局 ...
随机推荐
- zoj3469 区间dp好题
/* 按坐标排序 以餐厅为起点向两边扩展区间 dp[i][j][0]表示送完区间[i,j]的饭后停留在左边的代价 dp[i][j][1]表示送完区间[i,j]的饭后停留在右边的代价 */ #inclu ...
- 性能测试二十二:环境部署之Nginx
由于单纯用tomcat只能通过ip+端口号的形式访问,这样只能访问一个tomcat,而真实项目中又不可能只用一两个tomcat,所以就需要Nginx来进行分配访问请求, Nginx本身性能非常好,据官 ...
- DDD领域模型实现依赖注入(六)
添加下订单的值对象: public partial class CustomerInfo:ValueObject { /// <summary> /// 下订单的值对象 /// </ ...
- php手动搭建wamp环境(一)--之 Windows系统下PHP环境搭建
1.PHP环境搭建的前提是 Apache HTTP Server (Apache 服务器)已经安装部署成功,并可以正常访问到服务器的主页面.Apache HTTP Server 的安装部署已经在上一篇 ...
- SpringMVC异常处理器
本节内容: 异常处理思路 自定义异常类 自定义异常处理器 异常处理器配置 错误页面 异常测试 springmvc在处理请求过程中出现异常信息交由异常处理器进行处理,自定义异常处理器可以实现一个系统的异 ...
- POJ 2395 Out of Hay (Kruskal)
题意:从待选的路里面选出若干将所有点连通,求选出的边里最长边的最小值. 算法:要使得树的最长边最小,那么每次确定的边都应是待选边里最小的,即最小生成树.对应Kruskal算法. #include &l ...
- Storm(三)Storm的原理机制
一.Storm的数据分发策略 1. Shuffle Grouping 随机分组,随机派发stream里面的tuple,保证每个bolt task接收到的tuple数目大致相同. 轮询,平均分配 2. ...
- sublime断点调试
系统重装了之后以前装好的zendstudio的xDebug又不能用了 搞了一天,放弃了 看到sublime也能调试,我就用sublime了 首先要下sublime插件 链接:http://pan.ba ...
- VS2010发布、打包安装程序(超全超详细)
1. 在vs2010 选择“新建项目”→“ 其他项目类型”→“ Visual Studio Installer→“安装项目”: 命名为:Setup1 . 这是在VS2010中将有三个文件夹, 1.“应 ...
- python 字符串组成MySql 命令时,字符串含有单引号或者双引号导致出错解决办法
引用自:https://blog.csdn.net/zhaoya_huangqing/article/details/48036839 一.在组成SQL语句并发送命令时完全按照Python中的样式去传 ...