mirror of
https://github.com/morrisjs/morris.js.git
synced 2024-11-10 21:36:34 +01:00
Define bar colors with a function.
This commit is contained in:
parent
d6b955af02
commit
236afa4003
43
examples/bar-colors.html
Normal file
43
examples/bar-colors.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/300aa589f5a0ba7fce667cd62c7cdda0bd5ad904/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="lib/prettify.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="lib/prettify.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Bar charts</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
// Use Morris.Bar
|
||||
Morris.Bar({
|
||||
element: 'graph',
|
||||
data: [
|
||||
{x: '2011 Q1', y: 0},
|
||||
{x: '2011 Q2', y: 1},
|
||||
{x: '2011 Q3', y: 2},
|
||||
{x: '2011 Q4', y: 3},
|
||||
{x: '2012 Q1', y: 4},
|
||||
{x: '2012 Q2', y: 5},
|
||||
{x: '2012 Q3', y: 6},
|
||||
{x: '2012 Q4', y: 7},
|
||||
{x: '2013 Q1', y: 8}
|
||||
],
|
||||
xkey: 'x',
|
||||
ykeys: ['y'],
|
||||
labels: ['Y'],
|
||||
barColors: function (row, series, type) {
|
||||
if (type === 'bar') {
|
||||
var red = Math.ceil(255 * row.y / this.ymax);
|
||||
return 'rgb(' + red + ',0,0)';
|
||||
}
|
||||
else {
|
||||
return '#000';
|
||||
}
|
||||
}
|
||||
});
|
||||
</pre>
|
||||
</body>
|
@ -120,7 +120,7 @@ class Morris.Bar extends Morris.Grid
|
||||
bottom = @bottom
|
||||
left = @left + idx * groupWidth + leftPadding + sidx * (barWidth + @options.barGap)
|
||||
@r.rect(left, top, barWidth, bottom - top)
|
||||
.attr('fill', @options.barColors[sidx % @options.barColors.length])
|
||||
.attr('fill', @colorFor(row, sidx, 'bar'))
|
||||
.attr('stroke-width', 0)
|
||||
else
|
||||
null
|
||||
@ -156,7 +156,7 @@ class Morris.Bar extends Morris.Grid
|
||||
row = @data[index]
|
||||
@xLabel.attr('text', row.label)
|
||||
for y, i in row.y
|
||||
@yLabels[i].attr('fill', @options.barColors[i % @options.barColors.length])
|
||||
@yLabels[i].attr('fill', @colorFor(row, i, 'hover'))
|
||||
@yLabels[i].attr('text', "#{@options.labels[i]}: #{@yLabelFormat(y)}")
|
||||
# recalculate hover box width
|
||||
maxLabelWidth = Math.max.apply null, (l.getBBox().width for l in @yLabels)
|
||||
@ -187,3 +187,16 @@ class Morris.Bar extends Morris.Grid
|
||||
for hoverIndex in [0...@hoverMargins.length]
|
||||
break if @hoverMargins[hoverIndex] > x
|
||||
@hilight hoverIndex
|
||||
|
||||
# @private
|
||||
#
|
||||
# @param row [Object] row data
|
||||
# @param sidx [Number] series index
|
||||
# @param type [String] "bar" or "hover"
|
||||
colorFor: (row, sidx, type) ->
|
||||
if typeof @options.barColors is 'function'
|
||||
r = { x: row.x, y: row.y[sidx], label: row.label }
|
||||
s = { index: sidx, key: @options.ykeys[sidx], label: @options.labels[sidx] }
|
||||
@options.barColors.call(@, r, s, type)
|
||||
else
|
||||
@options.barColors[sidx % @options.barColors.length]
|
||||
|
23
morris.js
23
morris.js
@ -1153,7 +1153,7 @@
|
||||
bottom = this.bottom;
|
||||
}
|
||||
left = this.left + idx * groupWidth + leftPadding + sidx * (barWidth + this.options.barGap);
|
||||
_results1.push(this.r.rect(left, top, barWidth, bottom - top).attr('fill', this.options.barColors[sidx % this.options.barColors.length]).attr('stroke-width', 0));
|
||||
_results1.push(this.r.rect(left, top, barWidth, bottom - top).attr('fill', this.colorFor(row, sidx, 'bar')).attr('stroke-width', 0));
|
||||
} else {
|
||||
_results1.push(null);
|
||||
}
|
||||
@ -1191,7 +1191,7 @@
|
||||
_ref = row.y;
|
||||
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
|
||||
y = _ref[i];
|
||||
this.yLabels[i].attr('fill', this.options.barColors[i % this.options.barColors.length]);
|
||||
this.yLabels[i].attr('fill', this.colorFor(row, i, 'hover'));
|
||||
this.yLabels[i].attr('text', "" + this.options.labels[i] + ": " + (this.yLabelFormat(y)));
|
||||
}
|
||||
maxLabelWidth = Math.max.apply(null, (function() {
|
||||
@ -1238,6 +1238,25 @@
|
||||
return this.hilight(hoverIndex);
|
||||
};
|
||||
|
||||
Bar.prototype.colorFor = function(row, sidx, type) {
|
||||
var r, s;
|
||||
if (typeof this.options.barColors === 'function') {
|
||||
r = {
|
||||
x: row.x,
|
||||
y: row.y[sidx],
|
||||
label: row.label
|
||||
};
|
||||
s = {
|
||||
index: sidx,
|
||||
key: this.options.ykeys[sidx],
|
||||
label: this.options.labels[sidx]
|
||||
};
|
||||
return this.options.barColors.call(this, r, s, type);
|
||||
} else {
|
||||
return this.options.barColors[sidx % this.options.barColors.length];
|
||||
}
|
||||
};
|
||||
|
||||
return Bar;
|
||||
|
||||
})(Morris.Grid);
|
||||
|
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