一款免費的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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。