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

时间 2019-12-06

标签一款免费图表工具 morris 栏目 JavaScript 繁體版

原文原文链接

前段时间须要使用免费的图表工具作报表，同事说起了一款图表工具morris。官方网站：css

http://www.oesmith.co.uk/morris.js/html

该插件遵循BSD协议，能够用于商业软件，也能够进行修改，相对比较宽松。目前插件版本0.4.3，感受好像没有彻底开发完成，由于能够画的图相对有限。jquery

该插件依赖于jquery和Raphaël，jquery不用说你们都知道，其实Raphaël才是真正的核心所在。关于Raphaël能够参考下面的博客，遗憾的是前几天好像中文帮助页面还能够打开，今天打开失败了，仍是看英文文档吧ajax

http://www.cnblogs.com/lhb25/archive/2013/01/06/raphael-js-reference.html工具

使用morris最大有点是简单明了，很符合咱们写js的习惯，不像有些图表工具要写xml等，并且不是使用flash，这一点我很喜欢。测试

下面举个例子，看看怎么使用吧：和官网有些不一样点网站

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>morris测试</title>
    <link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css"/>
</head>
<body>
<div style="height:300px;" id="myfirstchart"></div>

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>
<script>
    $(function() {
        new Morris.Line({
            element: $('#myfirstchart'),
            data: [
                { year: '第一周', value: 20 },
                { year: '第二周', value: 10 },
                { year: '第三周', value: 5 },
                { year: '第四周', value: 5 },
                { year: '第五周', value: 20 }
            ],
            xkey: 'year',
            ykeys: ['value'],
            labels: ['得分'],
            parseTime: false
        });
    })
</script>
</body>
</html>

因为咱们须要饼图，可是这个插件没有提供饼图，本身照着帮助文档很粗略的写了一个饼图的扩展，有机会再上传吧。spa