Add ability to customize point fill

This commit is contained in:
Sam Figueroa 2012-10-09 19:06:06 +02:00
parent 05d26c68e9
commit 528a205257
4 changed files with 21 additions and 8 deletions

View File

@ -79,6 +79,8 @@ class Morris.Line
'#ffffff' '#ffffff'
'#ffffff' '#ffffff'
] ]
pointFillColors: [
]
ymax: 'auto' ymax: 'auto'
ymin: 'auto 0' ymin: 'auto 0'
marginTop: 25 marginTop: 25
@ -313,7 +315,7 @@ class Morris.Line
circle = null circle = null
else else
circle = @r.circle(c.x, c.y, @options.pointSize) circle = @r.circle(c.x, c.y, @options.pointSize)
.attr('fill', @colorForSeries(i)) .attr('fill', @pointFillColorForSeries(i) || @colorForSeries(i))
.attr('stroke-width', @strokeWidthForSeries(i)) .attr('stroke-width', @strokeWidthForSeries(i))
.attr('stroke', @strokeForSeries(i)) .attr('stroke', @strokeForSeries(i))
@seriesPoints[i].push(circle) @seriesPoints[i].push(circle)
@ -460,6 +462,10 @@ class Morris.Line
strokeForSeries: (index) -> strokeForSeries: (index) ->
@options.pointStrokeColors[index % @options.pointStrokeColors.length] @options.pointStrokeColors[index % @options.pointStrokeColors.length]
# @private
pointFillColorForSeries: (index) ->
@options.pointFillColors[index % @options.pointFillColors.length]
# Parse a date into a javascript timestamp # Parse a date into a javascript timestamp
# #

View File

@ -355,6 +355,7 @@
lineColors: ['#0b62a4', '#7A92A3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'], lineColors: ['#0b62a4', '#7A92A3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'],
pointWidths: [1, 1, 1, 1, 1, 1], pointWidths: [1, 1, 1, 1, 1, 1],
pointStrokeColors: ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'], pointStrokeColors: ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'],
pointFillColors: [],
ymax: 'auto', ymax: 'auto',
ymin: 'auto 0', ymin: 'auto 0',
marginTop: 25, marginTop: 25,
@ -638,11 +639,9 @@
if (c === null) { if (c === null) {
circle = null; circle = null;
} else { } else {
circle = this.r.circle(c.x, c.y, this.options.pointSize).attr('fill', this.colorForSeries(i)).attr('stroke-width', this.strokeWidthForSeries(i)).attr('stroke', this.strokeForSeries(i)); circle = this.r.circle(c.x, c.y, this.options.pointSize).attr('fill', this.pointFillColorForSeries(i) || this.colorForSeries(i)).attr('stroke-width', this.strokeWidthForSeries(i)).attr('stroke', this.strokeForSeries(i));
} }
this.seriesPoints[i].push(circle); _results1.push(this.seriesPoints[i].push(circle));
console.log(this.strokeWidthForSeries(i));
_results1.push(console.log(this.strokeForSeries(i)));
} }
return _results1; return _results1;
}).call(this)); }).call(this));
@ -811,6 +810,10 @@
return this.options.pointStrokeColors[index % this.options.pointStrokeColors.length]; return this.options.pointStrokeColors[index % this.options.pointStrokeColors.length];
}; };
Line.prototype.pointFillColorForSeries = function(index) {
return this.options.pointFillColors[index % this.options.pointFillColors.length];
};
return Line; return Line;
})(); })();

2
morris.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -30,7 +30,7 @@ describe 'Morris.Line', ->
) )
fn.should.throw(/Graph placeholder not found./) fn.should.throw(/Graph placeholder not found./)
it 'should make point styles user accessible', -> it 'should make point styles customizable', ->
my_data = [{x: 1, y: 1}, {x: 2, y: 2}] my_data = [{x: 1, y: 1}, {x: 2, y: 2}]
red = '#ff0000' red = '#ff0000'
blue = '#0000ff' blue = '#0000ff'
@ -42,7 +42,11 @@ describe 'Morris.Line', ->
labels: ['dontcare'] labels: ['dontcare']
pointStrokeColors: [red, blue] pointStrokeColors: [red, blue]
pointWidths: [1, 2] pointWidths: [1, 2]
pointFillColors: [null, red]
chart.strokeWidthForSeries(0).should.equal 1 chart.strokeWidthForSeries(0).should.equal 1
chart.strokeForSeries(0).should.equal red chart.strokeForSeries(0).should.equal red
chart.strokeWidthForSeries(1).should.equal 2 chart.strokeWidthForSeries(1).should.equal 2
chart.strokeForSeries(1).should.equal blue chart.strokeForSeries(1).should.equal blue
(null == chart.pointFillColorForSeries(0)).should.be
(chart.pointFillColorForSeries(0) || chart.colorForSeries(0)).should.equal chart.colorForSeries(0)
chart.pointFillColorForSeries(1).should.equal red