Robot/morris.js
1
0
Fork 0
mirror of https://github.com/morrisjs/morris.js.git synced 2024-09-21 02:31:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add ability to customize points in a series

Browse Source
This commit is contained in:
Sam Figueroa 2012-10-09 17:27:15 +02:00
parent 7775332aeb
commit 0d42a6f026
4 changed files with 62 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
lib/morris.line.coffee
View File

@ -62,6 +62,23 @@ class Morris.Line
'#cb4b4b'
'#9440ed'
]
pointWidths: [
1
1
1
1
1
1
]
pointStrokeColors: [
'#ffffff'
'#ffffff'
'#ffffff'
'#ffffff'
'#ffffff'
'#ffffff'
'#ffffff'
]
ymax: 'auto'
ymin: 'auto 0'
marginTop: 25
@ -297,9 +314,11 @@ class Morris.Line
else
circle = @r.circle(c.x, c.y, @options.pointSize)
.attr('fill', @colorForSeries(i))
.attr('stroke-width', 1)
.attr('stroke', '#ffffff')
.attr('stroke-width', @strokeWidthForSeries(i))
.attr('stroke', @strokeForSeries(i))
@seriesPoints[i].push(circle)
console.log @strokeWidthForSeries(i)
console.log @strokeForSeries(i)
# create a path for a data series
#
@ -435,6 +454,14 @@ class Morris.Line
colorForSeries: (index) ->
@options.lineColors[index % @options.lineColors.length]
# @private
strokeWidthForSeries: (index) ->
@options.pointWidths[index % @options.pointWidths.length]
# @private
strokeForSeries: (index) ->
@options.pointStrokeColors[index % @options.pointStrokeColors.length]
# Parse a date into a javascript timestamp
#

16
morris.js
View File

@ -353,6 +353,8 @@
lineWidth: 3,
pointSize: 4,
lineColors: ['#0b62a4', '#7A92A3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'],
pointWidths: [1, 1, 1, 1, 1, 1],
pointStrokeColors: ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'],
ymax: 'auto',
ymin: 'auto 0',
marginTop: 25,
@ -636,9 +638,11 @@
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', 1).attr('stroke', '#ffffff');
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));
}
_results1.push(this.seriesPoints[i].push(circle));
this.seriesPoints[i].push(circle);
console.log(this.strokeWidthForSeries(i));
_results1.push(console.log(this.strokeForSeries(i)));
}
return _results1;
}).call(this));
@ -799,6 +803,14 @@
return this.options.lineColors[index % this.options.lineColors.length];
};
Line.prototype.strokeWidthForSeries = function(index) {
return this.options.pointWidths[index % this.options.pointWidths.length];
};
Line.prototype.strokeForSeries = function(index) {
return this.options.pointStrokeColors[index % this.options.pointStrokeColors.length];
};
return Line;
})();

2
morris.min.js vendored
View File

File diff suppressed because one or more lines are too long

19
spec/lib/line_spec.coffee
View File

@ -28,4 +28,21 @@ describe 'Morris.Line', ->
ykeys: ['y']
labels: ['dontcare']
)
fn.should.throw(/Graph placeholder not found./)
fn.should.throw(/Graph placeholder not found./)
it 'should make point styles user accessible', ->
my_data = [{x: 1, y: 1}, {x: 2, y: 2}]
red = '#ff0000'
blue = '#0000ff'
chart = Morris.Line
element: 'graph'
data: my_data
xkey: 'x'
ykeys: ['y']
labels: ['dontcare']
pointStrokeColors: [red, blue]
pointWidths: [1, 2]
chart.strokeWidthForSeries(0).should.equal 1
chart.strokeForSeries(0).should.equal red
chart.strokeWidthForSeries(1).should.equal 2
chart.strokeForSeries(1).should.equal blue