From fd5eede1f71d53c7d1ac465e931a96aed6c1207d Mon Sep 17 00:00:00 2001 From: fabriziofortino Date: Tue, 23 Sep 2014 22:29:34 +0100 Subject: [PATCH] graph3d: added support for custom axis ticks labels --- examples/graph3d/example12_ticks.html | 111 ++++++++++++++++++++++++++ examples/graph3d/index.html | 1 + lib/graph3d/Graph3d.js | 11 ++- 3 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 examples/graph3d/example12_ticks.html diff --git a/examples/graph3d/example12_ticks.html b/examples/graph3d/example12_ticks.html new file mode 100644 index 00000000..98f6e9d6 --- /dev/null +++ b/examples/graph3d/example12_ticks.html @@ -0,0 +1,111 @@ + + + + Graph 3D Axis Ticks + + + + + + + + + + +

+ +

+ +
+ +
+ + diff --git a/examples/graph3d/index.html b/examples/graph3d/index.html index 3af5edbe..3e7a9b6f 100644 --- a/examples/graph3d/index.html +++ b/examples/graph3d/index.html @@ -18,6 +18,7 @@

example09_mobile.html

example10_styles.html

example11_tooltips.html

+

example12_ticks.html

Playground

Open the playground

diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js index bbc6bdcd..912a9c66 100644 --- a/lib/graph3d/Graph3d.js +++ b/lib/graph3d/Graph3d.js @@ -36,6 +36,10 @@ function Graph3d(container, data, options) { this.xLabel = 'x'; this.yLabel = 'y'; this.zLabel = 'z'; + + this.xValueLabel = function(v) { return v; }; + this.yValueLabel = function(v) { return v; }; + this.filterLabel = 'time'; this.legendLabel = 'value'; @@ -829,6 +833,9 @@ Graph3d.prototype.setOptions = function (options) { if (options.yLabel !== undefined) this.yLabel = options.yLabel; if (options.zLabel !== undefined) this.zLabel = options.zLabel; + if (options.xValueLabel !== undefined) this.xValueLabel = options.xValueLabel; + if (options.yValueLabel !== undefined) this.yValueLabel = options.yValueLabel; + if (options.style !== undefined) { var styleNumber = this._getStyleNumber(options.style); if (styleNumber !== -1) { @@ -1179,7 +1186,7 @@ Graph3d.prototype._redrawAxis = function() { ctx.textBaseline = 'middle'; } ctx.fillStyle = this.colorAxis; - ctx.fillText(' ' + step.getCurrent() + ' ', text.x, text.y); + ctx.fillText(' ' + this.xValueLabel(step.getCurrent()) + ' ', text.x, text.y); step.next(); } @@ -1236,7 +1243,7 @@ Graph3d.prototype._redrawAxis = function() { ctx.textBaseline = 'middle'; } ctx.fillStyle = this.colorAxis; - ctx.fillText(' ' + step.getCurrent() + ' ', text.x, text.y); + ctx.fillText(' ' + this.yValueLabel(step.getCurrent()) + ' ', text.x, text.y); step.next(); }