mirror of
https://github.com/morrisjs/morris.js.git
synced 2024-09-21 02:31:32 +02:00
Formatter option for donut values (#75).
This commit is contained in:
parent
088233d8d2
commit
fbe3ce8201
@ -19,7 +19,8 @@ Morris.Donut({
|
|||||||
{value: 15, label: 'bar'},
|
{value: 15, label: 'bar'},
|
||||||
{value: 10, label: 'baz'},
|
{value: 10, label: 'baz'},
|
||||||
{value: 5, label: 'A really really long label'}
|
{value: 5, label: 'A really really long label'}
|
||||||
]
|
],
|
||||||
|
formatter: function (x) { return x + "%"}
|
||||||
});
|
});
|
||||||
</pre>
|
</pre>
|
||||||
</body>
|
</body>
|
||||||
|
@ -9,18 +9,20 @@
|
|||||||
# ]
|
# ]
|
||||||
# });
|
# });
|
||||||
class Morris.Donut
|
class Morris.Donut
|
||||||
colors: [
|
defaults:
|
||||||
'#0B62A4'
|
colors: [
|
||||||
'#3980B5'
|
'#0B62A4'
|
||||||
'#679DC6'
|
'#3980B5'
|
||||||
'#95BBD7'
|
'#679DC6'
|
||||||
'#B0CCE1'
|
'#95BBD7'
|
||||||
'#095791'
|
'#B0CCE1'
|
||||||
'#095085'
|
'#095791'
|
||||||
'#083E67'
|
'#095085'
|
||||||
'#052C48'
|
'#083E67'
|
||||||
'#042135'
|
'#052C48'
|
||||||
]
|
'#042135'
|
||||||
|
],
|
||||||
|
formatter: Morris.commas
|
||||||
|
|
||||||
# Create and render a donut chart.
|
# Create and render a donut chart.
|
||||||
#
|
#
|
||||||
@ -33,8 +35,7 @@ class Morris.Donut
|
|||||||
else
|
else
|
||||||
@el = $ options.element
|
@el = $ options.element
|
||||||
|
|
||||||
if options.colors?
|
@options = $.extend {}, @defaults, options
|
||||||
@colors = options.colors
|
|
||||||
|
|
||||||
if @el == null || @el.length == 0
|
if @el == null || @el.length == 0
|
||||||
throw new Error("Graph placeholder not found.")
|
throw new Error("Graph placeholder not found.")
|
||||||
@ -72,7 +73,7 @@ class Morris.Donut
|
|||||||
@segments = []
|
@segments = []
|
||||||
for d in @data
|
for d in @data
|
||||||
next = last + min + C * (d.value / total)
|
next = last + min + C * (d.value / total)
|
||||||
seg = new Morris.DonutSegment(cx, cy, w*2, w, last, next, @colors[idx % @colors.length], d)
|
seg = new Morris.DonutSegment(cx, cy, w*2, w, last, next, @options.colors[idx % @options.colors.length], d)
|
||||||
seg.render @r
|
seg.render @r
|
||||||
@segments.push seg
|
@segments.push seg
|
||||||
seg.on 'hover', @select
|
seg.on 'hover', @select
|
||||||
@ -92,7 +93,7 @@ class Morris.Donut
|
|||||||
select: (segment) =>
|
select: (segment) =>
|
||||||
s.deselect() for s in @segments
|
s.deselect() for s in @segments
|
||||||
segment.select()
|
segment.select()
|
||||||
@setLabels segment.data.label, Morris.commas(segment.data.value)
|
@setLabels segment.data.label, @options.formatter(segment.data.value)
|
||||||
|
|
||||||
# @private
|
# @private
|
||||||
setLabels: (label1, label2) ->
|
setLabels: (label1, label2) ->
|
||||||
|
13
morris.js
13
morris.js
@ -64,7 +64,10 @@
|
|||||||
|
|
||||||
Morris.Donut = (function() {
|
Morris.Donut = (function() {
|
||||||
|
|
||||||
Donut.prototype.colors = ['#0B62A4', '#3980B5', '#679DC6', '#95BBD7', '#B0CCE1', '#095791', '#095085', '#083E67', '#052C48', '#042135'];
|
Donut.prototype.defaults = {
|
||||||
|
colors: ['#0B62A4', '#3980B5', '#679DC6', '#95BBD7', '#B0CCE1', '#095791', '#095085', '#083E67', '#052C48', '#042135'],
|
||||||
|
formatter: Morris.commas
|
||||||
|
};
|
||||||
|
|
||||||
function Donut(options) {
|
function Donut(options) {
|
||||||
this.select = __bind(this.select, this);
|
this.select = __bind(this.select, this);
|
||||||
@ -76,9 +79,7 @@
|
|||||||
} else {
|
} else {
|
||||||
this.el = $(options.element);
|
this.el = $(options.element);
|
||||||
}
|
}
|
||||||
if (options.colors != null) {
|
this.options = $.extend({}, this.defaults, options);
|
||||||
this.colors = options.colors;
|
|
||||||
}
|
|
||||||
if (this.el === null || this.el.length === 0) {
|
if (this.el === null || this.el.length === 0) {
|
||||||
throw new Error("Graph placeholder not found.");
|
throw new Error("Graph placeholder not found.");
|
||||||
}
|
}
|
||||||
@ -112,7 +113,7 @@
|
|||||||
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
|
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
|
||||||
d = _ref1[_j];
|
d = _ref1[_j];
|
||||||
next = last + min + C * (d.value / total);
|
next = last + min + C * (d.value / total);
|
||||||
seg = new Morris.DonutSegment(cx, cy, w * 2, w, last, next, this.colors[idx % this.colors.length], d);
|
seg = new Morris.DonutSegment(cx, cy, w * 2, w, last, next, this.options.colors[idx % this.options.colors.length], d);
|
||||||
seg.render(this.r);
|
seg.render(this.r);
|
||||||
this.segments.push(seg);
|
this.segments.push(seg);
|
||||||
seg.on('hover', this.select);
|
seg.on('hover', this.select);
|
||||||
@ -158,7 +159,7 @@
|
|||||||
s.deselect();
|
s.deselect();
|
||||||
}
|
}
|
||||||
segment.select();
|
segment.select();
|
||||||
return this.setLabels(segment.data.label, Morris.commas(segment.data.value));
|
return this.setLabels(segment.data.label, this.options.formatter(segment.data.value));
|
||||||
};
|
};
|
||||||
|
|
||||||
Donut.prototype.setLabels = function(label1, label2) {
|
Donut.prototype.setLabels = function(label1, label2) {
|
||||||
|
2
morris.min.js
vendored
2
morris.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user