mirror of
https://github.com/morrisjs/morris.js.git
synced 2024-09-21 10:41:32 +02:00
Non-year X labels. This is controlled by new options numXLabels, xLabelFormat, and xLabelMargin.
This commit is contained in:
parent
18b4191093
commit
a2d25c5f56
@ -46,7 +46,11 @@ Morris.Line({
|
||||
data: week_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'SORN']
|
||||
labels: ['Licensed', 'SORN'],
|
||||
numXLabels: 7,
|
||||
xLabelFormat: function(x) {
|
||||
var d = new Date(x); return (d.getMonth()+1)+'-'+d.getFullYear()
|
||||
}
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
|
@ -43,6 +43,9 @@ class Morris.Line
|
||||
marginBottom: 30
|
||||
marginLeft: 25
|
||||
numLines: 5
|
||||
numXLabels: 5
|
||||
xLabelMargin: 50
|
||||
xLabelFormat: (x) -> new Date(x).getFullYear()
|
||||
gridLineColor: '#aaa'
|
||||
gridTextColor: '#888'
|
||||
gridTextSize: 12
|
||||
@ -208,28 +211,32 @@ class Morris.Line
|
||||
|
||||
## draw x axis labels
|
||||
prevLabelMargin = null
|
||||
xLabelMargin = 50 # make this an option?
|
||||
prevLabelText = null
|
||||
if @options.parseTime
|
||||
x1 = new Date(@xmin).getFullYear()
|
||||
x2 = new Date(@xmax).getFullYear()
|
||||
step = (@xmax - @xmin)/(@options.numXLabels-1)
|
||||
x1 = @xmin/step
|
||||
x2 = @xmax/step
|
||||
else
|
||||
x1 = 0
|
||||
x2 = @columnLabels.length
|
||||
for i in [x1..x2]
|
||||
if @options.parseTime
|
||||
xpos = new Date(i, 0, 1).getTime()
|
||||
xpos = i*step
|
||||
if xpos < @xmin
|
||||
continue
|
||||
else
|
||||
xpos = i
|
||||
labelText = if @options.parseTime then i else @columnLabels[@columnLabels.length-i-1]
|
||||
labelText = if @options.parseTime then @options.xLabelFormat(xpos) else @columnLabels[@columnLabels.length-i-1]
|
||||
if labelText == prevLabelText
|
||||
continue
|
||||
prevLabelText = labelText
|
||||
label = @r.text(@transX(xpos), @options.marginTop + @height + @options.marginBottom / 2, labelText)
|
||||
.attr('font-size', @options.gridTextSize)
|
||||
.attr('fill', @options.gridTextColor)
|
||||
labelBox = label.getBBox()
|
||||
# ensure a minimum of `xLabelMargin` pixels between labels
|
||||
if prevLabelMargin is null or prevLabelMargin <= labelBox.x
|
||||
prevLabelMargin = labelBox.x + labelBox.width + xLabelMargin
|
||||
prevLabelMargin = labelBox.x + labelBox.width + @options.xLabelMargin
|
||||
else
|
||||
label.remove()
|
||||
|
||||
|
22
morris.js
22
morris.js
@ -37,6 +37,11 @@
|
||||
marginBottom: 30,
|
||||
marginLeft: 25,
|
||||
numLines: 5,
|
||||
numXLabels: 5,
|
||||
xLabelMargin: 50,
|
||||
xLabelFormat: function(x) {
|
||||
return new Date(x).getFullYear();
|
||||
},
|
||||
gridLineColor: '#aaa',
|
||||
gridTextColor: '#888',
|
||||
gridTextSize: 12,
|
||||
@ -219,7 +224,7 @@
|
||||
};
|
||||
|
||||
Line.prototype.drawGrid = function() {
|
||||
var firstY, i, label, labelBox, labelText, lastY, lineY, prevLabelMargin, v, x1, x2, xLabelMargin, xpos, y, yInterval, _results;
|
||||
var firstY, i, label, labelBox, labelText, lastY, lineY, prevLabelMargin, prevLabelText, step, v, x1, x2, xpos, y, yInterval, _results;
|
||||
yInterval = (this.options.ymax - this.options.ymin) / (this.options.numLines - 1);
|
||||
firstY = Math.ceil(this.options.ymin / yInterval) * yInterval;
|
||||
lastY = Math.floor(this.options.ymax / yInterval) * yInterval;
|
||||
@ -230,10 +235,11 @@
|
||||
this.r.path("M" + this.left + "," + y + "H" + (this.left + this.width)).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth);
|
||||
}
|
||||
prevLabelMargin = null;
|
||||
xLabelMargin = 50;
|
||||
prevLabelText = null;
|
||||
if (this.options.parseTime) {
|
||||
x1 = new Date(this.xmin).getFullYear();
|
||||
x2 = new Date(this.xmax).getFullYear();
|
||||
step = (this.xmax - this.xmin) / (this.options.numXLabels - 1);
|
||||
x1 = this.xmin / step;
|
||||
x2 = this.xmax / step;
|
||||
} else {
|
||||
x1 = 0;
|
||||
x2 = this.columnLabels.length;
|
||||
@ -241,16 +247,18 @@
|
||||
_results = [];
|
||||
for (i = x1; x1 <= x2 ? i <= x2 : i >= x2; x1 <= x2 ? i++ : i--) {
|
||||
if (this.options.parseTime) {
|
||||
xpos = new Date(i, 0, 1).getTime();
|
||||
xpos = i * step;
|
||||
if (xpos < this.xmin) continue;
|
||||
} else {
|
||||
xpos = i;
|
||||
}
|
||||
labelText = this.options.parseTime ? i : this.columnLabels[this.columnLabels.length - i - 1];
|
||||
labelText = this.options.parseTime ? this.options.xLabelFormat(xpos) : this.columnLabels[this.columnLabels.length - i - 1];
|
||||
if (labelText === prevLabelText) continue;
|
||||
prevLabelText = labelText;
|
||||
label = this.r.text(this.transX(xpos), this.options.marginTop + this.height + this.options.marginBottom / 2, labelText).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor);
|
||||
labelBox = label.getBBox();
|
||||
if (prevLabelMargin === null || prevLabelMargin <= labelBox.x) {
|
||||
_results.push(prevLabelMargin = labelBox.x + labelBox.width + xLabelMargin);
|
||||
_results.push(prevLabelMargin = labelBox.x + labelBox.width + this.options.xLabelMargin);
|
||||
} else {
|
||||
_results.push(label.remove());
|
||||
}
|
||||
|
2
morris.min.js
vendored
2
morris.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user