You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
simple-yewu/frontend/web/assets/js/demo/morris-demo.js

181 lines
4.0 KiB

$(function() {
Morris.Line({
element: 'morris-one-line-chart',
data: [
{ year: '2008', value: 5 },
{ year: '2009', value: 10 },
{ year: '2010', value: 8 },
{ year: '2011', value: 22 },
{ year: '2012', value: 8 },
{ year: '2014', value: 10 },
{ year: '2015', value: 5 }
],
xkey: 'year',
ykeys: ['value'],
resize: true,
lineWidth:4,
labels: ['Value'],
lineColors: ['#1ab394'],
pointSize:5,
});
Morris.Area({
element: 'morris-area-chart',
data: [{
period: '2010 Q1',
iphone: 2666,
ipad: null,
itouch: 2647
}, {
period: '2010 Q2',
iphone: 2778,
ipad: 2294,
itouch: 2441
}, {
period: '2010 Q3',
iphone: 4912,
ipad: 1969,
itouch: 2501
}, {
period: '2010 Q4',
iphone: 3767,
ipad: 3597,
itouch: 5689
}, {
period: '2011 Q1',
iphone: 6810,
ipad: 1914,
itouch: 2293
}, {
period: '2011 Q2',
iphone: 5670,
ipad: 4293,
itouch: 1881
}, {
period: '2011 Q3',
iphone: 4820,
ipad: 3795,
itouch: 1588
}, {
period: '2011 Q4',
iphone: 15073,
ipad: 5967,
itouch: 5175
}, {
period: '2012 Q1',
iphone: 10687,
ipad: 4460,
itouch: 2028
}, {
period: '2012 Q2',
iphone: 8432,
ipad: 5713,
itouch: 1791
}],
xkey: 'period',
ykeys: ['iphone', 'ipad', 'itouch'],
labels: ['iPhone', 'iPad', 'iPod Touch'],
pointSize: 2,
hideHover: 'auto',
resize: true,
lineColors: ['#87d6c6', '#54cdb4','#1ab394'],
lineWidth:2,
pointSize:1,
});
Morris.Donut({
element: 'morris-donut-chart',
data: [{
label: "A系列",
value: 12
}, {
label: "B系列",
value: 30
}, {
label: "C系列",
value: 20
}],
resize: true,
colors: ['#87d6c6', '#54cdb4','#1ab394'],
});
Morris.Bar({
element: 'morris-bar-chart',
data: [{
y: '2006',
a: 60,
b: 50
}, {
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: ['A系列', 'B系列'],
hideHover: 'auto',
resize: true,
barColors: ['#1ab394', '#cacaca'],
});
Morris.Line({
element: 'morris-line-chart',
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: ['A系列', 'B系列'],
hideHover: 'auto',
resize: true,
lineColors: ['#54cdb4','#1ab394'],
});
});