Option for hiding axes.

This commit is contained in:
Olly Smith 2012-12-20 07:50:16 +00:00
parent c82d335976
commit 06a2ab3501
6 changed files with 35 additions and 25 deletions

View File

@ -16,7 +16,7 @@
// Use Morris.Bar // Use Morris.Bar
Morris.Bar({ Morris.Bar({
element: 'graph', element: 'graph',
grid: false, axes: false,
data: [ data: [
{x: '2011 Q1', y: 3, z: 2, a: 3}, {x: '2011 Q1', y: 3, z: 2, a: 3},
{x: '2011 Q2', y: 2, z: null, a: 1}, {x: '2011 Q2', y: 2, z: null, a: 1},

View File

@ -46,7 +46,7 @@ class Morris.Bar extends Morris.Grid
# Draws the bar chart. # Draws the bar chart.
# #
draw: -> draw: ->
@drawXAxis() if @options.grid @drawXAxis() if @options.axes
@drawSeries() @drawSeries()
# draw the x-axis labels # draw the x-axis labels

View File

@ -59,6 +59,7 @@ class Morris.Grid extends Morris.EventEmitter
# #
gridDefaults: gridDefaults:
dateFormat: null dateFormat: null
axes: true
grid: true grid: true
gridLineColor: '#aaa' gridLineColor: '#aaa'
gridStrokeWidth: 0.5 gridStrokeWidth: 0.5
@ -199,12 +200,12 @@ class Morris.Grid extends Morris.EventEmitter
@right = @elementWidth - @options.padding @right = @elementWidth - @options.padding
@top = @options.padding @top = @options.padding
@bottom = @elementHeight - @options.padding @bottom = @elementHeight - @options.padding
if @options.grid if @options.axes
maxYLabelWidth = Math.max( maxYLabelWidth = Math.max(
@measureText(@yAxisFormat(@ymin), @options.gridTextSize).width, @measureText(@yAxisFormat(@ymin), @options.gridTextSize).width,
@measureText(@yAxisFormat(@ymax), @options.gridTextSize).width) @measureText(@yAxisFormat(@ymax), @options.gridTextSize).width)
@left += maxYLabelWidth @left += maxYLabelWidth
@bottom -= 1.5 * @options.gridTextSize if @options.grid @bottom -= 1.5 * @options.gridTextSize
@width = @right - @left @width = @right - @left
@height = @bottom - @top @height = @bottom - @top
@dx = @width / (@xmax - @xmin) @dx = @width / (@xmax - @xmin)
@ -227,7 +228,7 @@ class Morris.Grid extends Morris.EventEmitter
redraw: -> redraw: ->
@r.clear() @r.clear()
@_calc() @_calc()
@drawGrid() if @options.grid @drawGrid()
@drawGoals() @drawGoals()
@drawEvents() @drawEvents()
@draw() if @draw @draw() if @draw
@ -250,15 +251,18 @@ class Morris.Grid extends Morris.EventEmitter
# draw y axis labels, horizontal lines # draw y axis labels, horizontal lines
# #
drawGrid: -> drawGrid: ->
return if @options.grid is false and @options.axes is false
firstY = @ymin firstY = @ymin
lastY = @ymax lastY = @ymax
for lineY in [firstY..lastY] by @yInterval for lineY in [firstY..lastY] by @yInterval
v = parseFloat(lineY.toFixed(@precision)) v = parseFloat(lineY.toFixed(@precision))
y = @transY(v) y = @transY(v)
if @options.axes
@r.text(@left - @options.padding / 2, y, @yAxisFormat(v)) @r.text(@left - @options.padding / 2, y, @yAxisFormat(v))
.attr('font-size', @options.gridTextSize) .attr('font-size', @options.gridTextSize)
.attr('fill', @options.gridTextColor) .attr('fill', @options.gridTextColor)
.attr('text-anchor', 'end') .attr('text-anchor', 'end')
if @options.grid
@r.path("M#{@left},#{y}H#{@left + @width}") @r.path("M#{@left},#{y}H#{@left + @width}")
.attr('stroke', @options.gridLineColor) .attr('stroke', @options.gridLineColor)
.attr('stroke-width', @options.gridStrokeWidth) .attr('stroke-width', @options.gridStrokeWidth)

View File

@ -124,7 +124,7 @@ class Morris.Line extends Morris.Grid
# Draws the line chart. # Draws the line chart.
# #
draw: -> draw: ->
@drawXAxis() if @options.grid @drawXAxis() if @options.axes
@drawSeries() @drawSeries()
if @options.hideHover is false if @options.hideHover is false
@displayHoverForRow(@data.length - 1) @displayHoverForRow(@data.length - 1)

View File

@ -117,6 +117,7 @@
Grid.prototype.gridDefaults = { Grid.prototype.gridDefaults = {
dateFormat: null, dateFormat: null,
axes: true,
grid: true, grid: true,
gridLineColor: '#aaa', gridLineColor: '#aaa',
gridStrokeWidth: 0.5, gridStrokeWidth: 0.5,
@ -294,13 +295,11 @@
this.right = this.elementWidth - this.options.padding; this.right = this.elementWidth - this.options.padding;
this.top = this.options.padding; this.top = this.options.padding;
this.bottom = this.elementHeight - this.options.padding; this.bottom = this.elementHeight - this.options.padding;
if (this.options.grid) { if (this.options.axes) {
maxYLabelWidth = Math.max(this.measureText(this.yAxisFormat(this.ymin), this.options.gridTextSize).width, this.measureText(this.yAxisFormat(this.ymax), this.options.gridTextSize).width); maxYLabelWidth = Math.max(this.measureText(this.yAxisFormat(this.ymin), this.options.gridTextSize).width, this.measureText(this.yAxisFormat(this.ymax), this.options.gridTextSize).width);
this.left += maxYLabelWidth; this.left += maxYLabelWidth;
if (this.options.grid) {
this.bottom -= 1.5 * this.options.gridTextSize; this.bottom -= 1.5 * this.options.gridTextSize;
} }
}
this.width = this.right - this.left; this.width = this.right - this.left;
this.height = this.bottom - this.top; this.height = this.bottom - this.top;
this.dx = this.width / (this.xmax - this.xmin); this.dx = this.width / (this.xmax - this.xmin);
@ -326,9 +325,7 @@
Grid.prototype.redraw = function() { Grid.prototype.redraw = function() {
this.r.clear(); this.r.clear();
this._calc(); this._calc();
if (this.options.grid) {
this.drawGrid(); this.drawGrid();
}
this.drawGoals(); this.drawGoals();
this.drawEvents(); this.drawEvents();
if (this.draw) { if (this.draw) {
@ -360,14 +357,23 @@
Grid.prototype.drawGrid = function() { Grid.prototype.drawGrid = function() {
var firstY, lastY, lineY, v, y, _i, _ref, _results; var firstY, lastY, lineY, v, y, _i, _ref, _results;
if (this.options.grid === false && this.options.axes === false) {
return;
}
firstY = this.ymin; firstY = this.ymin;
lastY = this.ymax; lastY = this.ymax;
_results = []; _results = [];
for (lineY = _i = firstY, _ref = this.yInterval; firstY <= lastY ? _i <= lastY : _i >= lastY; lineY = _i += _ref) { for (lineY = _i = firstY, _ref = this.yInterval; firstY <= lastY ? _i <= lastY : _i >= lastY; lineY = _i += _ref) {
v = parseFloat(lineY.toFixed(this.precision)); v = parseFloat(lineY.toFixed(this.precision));
y = this.transY(v); y = this.transY(v);
if (this.options.axes) {
this.r.text(this.left - this.options.padding / 2, y, this.yAxisFormat(v)).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor).attr('text-anchor', 'end'); this.r.text(this.left - this.options.padding / 2, y, this.yAxisFormat(v)).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor).attr('text-anchor', 'end');
}
if (this.options.grid) {
_results.push(this.r.path("M" + this.left + "," + y + "H" + (this.left + this.width)).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth)); _results.push(this.r.path("M" + this.left + "," + y + "H" + (this.left + this.width)).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth));
} else {
_results.push(void 0);
}
} }
return _results; return _results;
}; };
@ -707,7 +713,7 @@
}; };
Line.prototype.draw = function() { Line.prototype.draw = function() {
if (this.options.grid) { if (this.options.axes) {
this.drawXAxis(); this.drawXAxis();
} }
this.drawSeries(); this.drawSeries();
@ -1158,7 +1164,7 @@
}; };
Bar.prototype.draw = function() { Bar.prototype.draw = function() {
if (this.options.grid) { if (this.options.axes) {
this.drawXAxis(); this.drawXAxis();
} }
return this.drawSeries(); return this.drawSeries();

2
morris.min.js vendored

File diff suppressed because one or more lines are too long