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>
<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>