挺好用的,碰到几个问题,有的是瞎试解决了的:

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图表使用小记的更多相关文章

  1. 简洁AngularJS框架后台管理系统bootstrap后台模板

    最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...

  2. 一款免费的js图表工具--morris

    前段时间需要使用免费的图表工具做报表,同事提及了一款图表工具morris.官方网站: http://www.oesmith.co.uk/morris.js/ 该插件遵循BSD协议,可以用于商业软件,也 ...

  3. Morris 轻量级 图表

    Morris.js 是基于 jQuery 和 Raphaël 的轻量级矢量图形库,帮助开发人员轻松绘制各种形式的图表.示例: HTML: <div id="myfirstchart&q ...

  4. 时间作为横轴的图表(morris.js)超越昨天的自己系列(8)

    超越昨天的自己系列(8) morris.js的官网有详细的例子:http://www.oesmith.co.uk/morris.js/ 特别注意它的依赖: <link rel="sty ...

  5. jquery图表插件morris.js参数详解和highcharts图表插件

    一.morris.js 优点:轻巧.简单好用 缺点:没highcharts功能多,常用的足以 网址:http://morrisjs.github.io/morris.js/ 核心代码 1.head调用 ...

  6. 轻量级的绘制图表js库--Morris.js

    Morris.js 是一个轻量级的 JS 库,使用 jQuery 和 Raphaël 来生成各种时序图. 虽说现在移动手机网络已经到了4G,但是在移动web客户端开发过中,为了达到良好的体验效果,需要 ...

  7. 【MVVMLight小记】二.开发一个简单图表生成程序附源码

    上一篇文章介绍了怎样快速搭建一个基于MVVMLight的程序http://www.cnblogs.com/whosedream/p/mvvmlight1.html算是简单入门了下,今天我们来做一个稍许 ...

  8. Morris.js和flot绘制折线图的比较

    [文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的 ...

  9. ConCurrent in Practice小记 (1)

    ConCurrent in Practice小记 (1) 杂记,随书自己写的笔记: 综述问题 1.线程允许在同一个进程中的资源,包括共享内存,内存句柄,文件句柄.但是每个进程有自己的程序计数器,栈和局 ...

随机推荐

  1. poj3728 倍增法lca 好题!

    lca的好题!网上用st表和离线解的比较多,用树上倍增也是可以做的 不知道错在哪里,等刷完了这个专题再回来看 题解链接https://blog.csdn.net/Sd_Invol/article/de ...

  2. 性能测试三十三:监控之Linux系统监控命令大全

    1.top命令top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法.top - 01:06:48 up 1: ...

  3. Number对象的常用属性和方法

    方法 描述 isNan() 检查值是否为数字 toFied() 将特定数字四舍五入至小数位数(返回一个字符串) toPrecision() 按数字的位数四舍五入(返回一个字符串) toExponent ...

  4. thinkphp获取ip地址及位置信息

    ThinkPHP\Common\funcitons.php下有一个get_client_ip()能够获取ip地址 但是有时候不够准确 找到了下面一段来 function get_client_ip($ ...

  5. Nordic Collegiate Programming Contest NCPC 2017-Problem D-Distinctive Character

    题目大意:给你n(n<=1e5)个二进制串 (每个串位数不超过20),定义两个串的相似度为对应 位置上相同的个数. 让你构造一个二进制串,使这个串与所给的这些串的相似度的最小值最大. 思路:刚开 ...

  6. 安装Numpy方法

    Numpy安装(要先安装好python,见<windows下的python环境搭建(python2和python3不兼容,python2用的多)>) Numpy是Python的一个科学计算 ...

  7. P、NP、NPC、NPH问题的区别和联系

    时间复杂度 时间复杂度描述了当输入规模变大时,程序运行时间的变化程度,通常使用\(O\)来表示.比如单层循环的时间复杂度为\(O(n)\),也就是说程序运行的时间随着输入规模的增大线性增长,两层循环的 ...

  8. Centos下基于Hadoop安装Spark(分布式)

    前提 Hadoop可成功在分布式系统下启动 下载scala  链接是https://downloads.lightbend.com/scala/2.12.7/scala-2.12.7.tgz Mast ...

  9. python实现用户登陆(sqlite数据库存储用户信息)

    python实现用户登陆(sqlite数据库存储用户信息) 目录 创建数据库 数据库管理 简单登陆 有些地方还未完善. 创建数据库 import sqlite3 #建一个数据库 def create_ ...

  10. wireshark实战之局域网抓包分析

    Wireshark.它是一款本地监听数据的大杀器,弊端是只能监听本地的数据,有什么办法可以让局域网中的流量都从本机走呢? 第一ARP嗅探,劫持网关,再本地抓包. 第二交换机镜像端口,在路由或者交换机处 ...