morris.js 简单学习

需要添加的引用脚本

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="morris.min.js" type="text/javascript"></script>

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<body>
     
    <div id="donut-example"></div>
    <div id="line-example"></div>
     <div id="bar-example"></div>
    <script type="text/javascript">
        Morris.Donut({
            element: 'donut-example',
            data: [
            { label: "下载文件数", value: 56 },
    { label: "App信息数", value: 100 },
    { label: "页面信息数", value: 200 },
    { label: "销售信息数", value: 30 },
    { label: "邮箱信息数", value: 23 },
    { label: "人员信息数", value: 12 }
  ]
        });
 
        Morris.Line({
            element: 'line-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: ['上线', '下线']
        });
 
        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']
        });
    </script>
</body>

　　

posted on   荣锋亮  阅读(2193)  评论(0)  编辑  收藏  举报

编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
历史上的今天：
2014-04-30 SQL Server用户自定义函数
2014-04-30 ORACLE配置tnsnames.ora文件实例
2014-04-30 转 AngularJS 2.0将面向移动应用并放弃旧浏览器
2014-04-30 Oracle connect resource权限
2014-04-30 Oracle 创建普通用户，并赋予权限
2014-04-30 Oracle 存储过程了解
2014-04-30 转 MetaWeblog API 编写

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示