mirror of
https://github.com/morrisjs/morris.js.git
synced 2024-11-10 21:36:34 +01:00
Add ability to customize point fill
This commit is contained in:
parent
05d26c68e9
commit
528a205257
@ -79,6 +79,8 @@ class Morris.Line
|
||||
'#ffffff'
|
||||
'#ffffff'
|
||||
]
|
||||
pointFillColors: [
|
||||
]
|
||||
ymax: 'auto'
|
||||
ymin: 'auto 0'
|
||||
marginTop: 25
|
||||
@ -313,7 +315,7 @@ class Morris.Line
|
||||
circle = null
|
||||
else
|
||||
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', @strokeForSeries(i))
|
||||
@seriesPoints[i].push(circle)
|
||||
@ -460,6 +462,10 @@ class Morris.Line
|
||||
strokeForSeries: (index) ->
|
||||
@options.pointStrokeColors[index % @options.pointStrokeColors.length]
|
||||
|
||||
# @private
|
||||
pointFillColorForSeries: (index) ->
|
||||
@options.pointFillColors[index % @options.pointFillColors.length]
|
||||
|
||||
|
||||
# Parse a date into a javascript timestamp
|
||||
#
|
||||
|
11
morris.js
11
morris.js
@ -355,6 +355,7 @@
|
||||
lineColors: ['#0b62a4', '#7A92A3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'],
|
||||
pointWidths: [1, 1, 1, 1, 1, 1],
|
||||
pointStrokeColors: ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'],
|
||||
pointFillColors: [],
|
||||
ymax: 'auto',
|
||||
ymin: 'auto 0',
|
||||
marginTop: 25,
|
||||
@ -638,11 +639,9 @@
|
||||
if (c === null) {
|
||||
circle = null;
|
||||
} 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);
|
||||
console.log(this.strokeWidthForSeries(i));
|
||||
_results1.push(console.log(this.strokeForSeries(i)));
|
||||
_results1.push(this.seriesPoints[i].push(circle));
|
||||
}
|
||||
return _results1;
|
||||
}).call(this));
|
||||
@ -811,6 +810,10 @@
|
||||
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;
|
||||
|
||||
})();
|
||||
|
2
morris.min.js
vendored
2
morris.min.js
vendored
File diff suppressed because one or more lines are too long
@ -30,7 +30,7 @@ describe 'Morris.Line', ->
|
||||
)
|
||||
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}]
|
||||
red = '#ff0000'
|
||||
blue = '#0000ff'
|
||||
@ -42,7 +42,11 @@ describe 'Morris.Line', ->
|
||||
labels: ['dontcare']
|
||||
pointStrokeColors: [red, blue]
|
||||
pointWidths: [1, 2]
|
||||
pointFillColors: [null, red]
|
||||
chart.strokeWidthForSeries(0).should.equal 1
|
||||
chart.strokeForSeries(0).should.equal red
|
||||
chart.strokeWidthForSeries(1).should.equal 2
|
||||
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
|
Loading…
Reference in New Issue
Block a user