Robot/morris.js
1
0
Fork 0
mirror of https://github.com/morrisjs/morris.js.git synced 2024-11-13 07:11:12 +01:00
Code Issues Projects Releases Packages Wiki Activity

Define bar colors with a function.

Browse source
This commit is contained in:
Olly Smith 2012-11-06 08:18:19 +00:00
parent d6b955af02
commit 236afa4003
4 changed files with 80 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
examples/bar-colors.html Normal file
View 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>

17
lib/morris.bar.coffee
View file

@ -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
View file

@ -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
View file

File diff suppressed because one or more lines are too long