Browse Source

Add point draw methods for styles 'dot' and 'dot-line' (#2212)

codeClimate
wimrijnders 8 years ago
committed by Alexander Wunschik
parent
commit
1c4e1a41ee
1 changed files with 97 additions and 20 deletions
  1. +97
    -20
      lib/graph3d/Graph3d.js

+ 97
- 20
lib/graph3d/Graph3d.js View File

@ -817,21 +817,13 @@ Graph3d.prototype.setOptions = function (options) {
} }
}; };
/** /**
* Redraw the Graph.
* Determine which point drawing method to use
*/ */
Graph3d.prototype.redraw = function() {
if (this.dataPoints === undefined) {
throw new Error('Graph data not initialized');
}
this._resizeCanvas();
this._resizeCenter();
this._redrawSlider();
this._redrawClear();
this._redrawAxis();
Graph3d.prototype.getPointDrawingMethod = function() {
var pointDrawingMethod = undefined; var pointDrawingMethod = undefined;
switch (this.style) { switch (this.style) {
case Graph3d.STYLE.BAR: case Graph3d.STYLE.BAR:
pointDrawingMethod = Graph3d.prototype._redrawBarGraphPoint; pointDrawingMethod = Graph3d.prototype._redrawBarGraphPoint;
@ -842,8 +834,34 @@ Graph3d.prototype.redraw = function() {
case Graph3d.STYLE.BARSIZE: case Graph3d.STYLE.BARSIZE:
pointDrawingMethod = Graph3d.prototype._redrawBarSizeGraphPoint; pointDrawingMethod = Graph3d.prototype._redrawBarSizeGraphPoint;
break; break;
case Graph3d.STYLE.DOT:
pointDrawingMethod = Graph3d.prototype._redrawDotGraphPoint;
break;
case Graph3d.STYLE.DOT:
pointDrawingMethod = Graph3d.prototype._redrawDotLineGraphPoint;
break;
} }
return pointDrawingMethod;
};
/**
* Redraw the Graph.
*/
Graph3d.prototype.redraw = function() {
if (this.dataPoints === undefined) {
throw new Error('Graph data not initialized');
}
this._resizeCanvas();
this._resizeCenter();
this._redrawSlider();
this._redrawClear();
this._redrawAxis();
var pointDrawingMethod = this.getPointDrawingMethod();
if (pointDrawingMethod !== undefined) { if (pointDrawingMethod !== undefined) {
// Use generic drawing loop // Use generic drawing loop
// Pass the method reference here // Pass the method reference here
@ -1581,7 +1599,7 @@ Graph3d.prototype._redrawDataDot = function() {
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// Methods for drawing points per graph style.
// Drawing primitives for the graphs
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
/** /**
@ -1670,19 +1688,43 @@ Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borde
}; };
Graph3d.prototype._drawCircle = function(ctx, point, radius, color, borderColor) {
ctx.lineWidth = this._getStrokeWidth(point);
ctx.strokeStyle = borderColor;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(point.screen.x, point.screen.y, radius, 0, Math.PI*2, true);
ctx.fill();
ctx.stroke();
};
Graph3d.prototype._getColorsRegular = function(ctx, point) {
// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
var hue = (1 - (point.point.z - this.zMin) * this.scale.z / this.verticalRatio) * 240;
var color = this._hsv2rgb(hue, 1, 1);
var borderColor = this._hsv2rgb(hue, 1, 0.8);
return {
fill : color,
border: borderColor
};
};
// -----------------------------------------------------------------------------
// Methods for drawing points per graph style.
// -----------------------------------------------------------------------------
/** /**
* Draw single datapoint for graph style 'bar'. * Draw single datapoint for graph style 'bar'.
*/ */
Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) { Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) {
var xWidth = this.xBarWidth / 2; var xWidth = this.xBarWidth / 2;
var yWidth = this.yBarWidth / 2; var yWidth = this.yBarWidth / 2;
var colors = this._getColorsRegular(ctx, point);
// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
var hue = (1 - (point.point.z - this.zMin) * this.scale.z / this.verticalRatio) * 240;
var color = this._hsv2rgb(hue, 1, 1);
var borderColor = this._hsv2rgb(hue, 1, 0.8);
this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor);
this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
}; };
@ -1711,7 +1753,6 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
var xWidth = (this.xBarWidth / 2) * (fraction * 0.8 + 0.2); var xWidth = (this.xBarWidth / 2) * (fraction * 0.8 + 0.2);
var yWidth = (this.yBarWidth / 2) * (fraction * 0.8 + 0.2); var yWidth = (this.yBarWidth / 2) * (fraction * 0.8 + 0.2);
// determine color // determine color
var color = this.dataColor.fill; var color = this.dataColor.fill;
var borderColor = this.dataColor.stroke; var borderColor = this.dataColor.stroke;
@ -1720,6 +1761,42 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
}; };
/**
* Draw single datapoint for graph style 'dot'.
*/
Graph3d.prototype._redrawDotGraphPoint = function(ctx, point) {
var size = this._dotSize();
var radius;
if (this.showPerspective) {
radius = size / -point.trans.z;
}
else {
radius = size * -(this.eye.z / this.camera.getArmLength());
}
if (radius < 0) {
radius = 0;
}
var colors = this._getColorsRegular(ctx, point);
this._drawCircle(ctx, point, radius, colors.fill, colors.border);
};
/**
* Draw single datapoint for graph style 'dot-line'.
*/
Graph3d.prototype._redrawDotLineGraphPoint = function(ctx, point) {
// draw a vertical line from the XY-plane to the graph value
var from = this._convert3Dto2D(point.bottom);
ctx.lineWidth = 1;
this._line(ctx, from, point.screen, this.gridColor);
this._redrawDotGraphPoint(ctx, point);
};
/** /**
* Draw all datapoints for currently selected graph style. * Draw all datapoints for currently selected graph style.
* *

Loading…
Cancel
Save