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'
|
||||||
'#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
|
||||||
#
|
#
|
||||||
|
11
morris.js
11
morris.js
@ -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
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./)
|
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
|
Loading…
Reference in New Issue
Block a user