Morris图表使用小记

时间：2022-03-23 16:05:59

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

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"});

大概效果如下，手机中看起来不错。

Morris图表使用小记

我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan

相关文章