mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +02:00
Reduce duplicated code in core scale draw method
This commit is contained in:
parent
6b2cfd5e11
commit
fbecfa2baf
@ -490,9 +490,8 @@ module.exports = function(Chart) {
|
|||||||
|
|
||||||
var isRotated = me.labelRotation !== 0;
|
var isRotated = me.labelRotation !== 0;
|
||||||
var skipRatio;
|
var skipRatio;
|
||||||
var scaleLabelX;
|
|
||||||
var scaleLabelY;
|
|
||||||
var useAutoskipper = optionTicks.autoSkip;
|
var useAutoskipper = optionTicks.autoSkip;
|
||||||
|
var isHorizontal = me.isHorizontal();
|
||||||
|
|
||||||
// figure out the maximum number of gridlines to show
|
// figure out the maximum number of gridlines to show
|
||||||
var maxTicks;
|
var maxTicks;
|
||||||
@ -522,9 +521,9 @@ module.exports = function(Chart) {
|
|||||||
// Make sure we draw text in the correct color and font
|
// Make sure we draw text in the correct color and font
|
||||||
context.fillStyle = tickFontColor;
|
context.fillStyle = tickFontColor;
|
||||||
|
|
||||||
if (me.isHorizontal()) {
|
var itemsToDraw = [];
|
||||||
var yTickStart = options.position === "bottom" ? me.top : me.bottom - tl;
|
|
||||||
var yTickEnd = options.position === "bottom" ? me.top + tl : me.bottom;
|
if (isHorizontal) {
|
||||||
skipRatio = false;
|
skipRatio = false;
|
||||||
|
|
||||||
// Only calculate the skip ratio with the half width of longestRotateLabel if we got an actual rotation
|
// Only calculate the skip ratio with the half width of longestRotateLabel if we got an actual rotation
|
||||||
@ -551,177 +550,178 @@ module.exports = function(Chart) {
|
|||||||
if (!useAutoskipper) {
|
if (!useAutoskipper) {
|
||||||
skipRatio = false;
|
skipRatio = false;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
helpers.each(me.ticks, function (label, index) {
|
|
||||||
// Blank optionTicks
|
|
||||||
var isLastTick = me.ticks.length === index + 1;
|
|
||||||
|
|
||||||
// Since we always show the last tick,we need may need to hide the last shown one before
|
var xTickStart = options.position === "right" ? me.left : me.right - tl;
|
||||||
var shouldSkip = (skipRatio > 1 && index % skipRatio > 0) || (index % skipRatio === 0 && index + skipRatio >= me.ticks.length);
|
var xTickEnd = options.position === "right" ? me.left + tl : me.right;
|
||||||
if (shouldSkip && !isLastTick || (label === undefined || label === null)) {
|
var yTickStart = options.position === "bottom" ? me.top : me.bottom - tl;
|
||||||
return;
|
var yTickEnd = options.position === "bottom" ? me.top + tl : me.bottom;
|
||||||
}
|
|
||||||
var xLineValue = me.getPixelForTick(index); // xvalues for grid lines
|
|
||||||
var xLabelValue = me.getPixelForTick(index, gridLines.offsetGridLines); // x values for optionTicks (need to consider offsetLabel option)
|
|
||||||
|
|
||||||
if (gridLines.display) {
|
helpers.each(me.ticks, function(label, index) {
|
||||||
if (index === (typeof me.zeroLineIndex !== 'undefined' ? me.zeroLineIndex : 0)) {
|
// If the callback returned a null or undefined value, do not draw this line
|
||||||
// Draw the first index specially
|
if (label === undefined || label === null) {
|
||||||
context.lineWidth = gridLines.zeroLineWidth;
|
return;
|
||||||
context.strokeStyle = gridLines.zeroLineColor;
|
|
||||||
} else {
|
|
||||||
context.lineWidth = helpers.getValueAtIndexOrDefault(gridLines.lineWidth, index);
|
|
||||||
context.strokeStyle = helpers.getValueAtIndexOrDefault(gridLines.color, index);
|
|
||||||
}
|
|
||||||
|
|
||||||
xLineValue += helpers.aliasPixel(context.lineWidth);
|
|
||||||
|
|
||||||
// Draw the label area
|
|
||||||
context.beginPath();
|
|
||||||
|
|
||||||
if (gridLines.drawTicks) {
|
|
||||||
context.moveTo(xLineValue, yTickStart);
|
|
||||||
context.lineTo(xLineValue, yTickEnd);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw the chart area
|
|
||||||
if (gridLines.drawOnChartArea) {
|
|
||||||
context.moveTo(xLineValue, chartArea.top);
|
|
||||||
context.lineTo(xLineValue, chartArea.bottom);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Need to stroke in the loop because we are potentially changing line widths & colours
|
|
||||||
context.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (optionTicks.display) {
|
|
||||||
context.save();
|
|
||||||
context.translate(xLabelValue + optionTicks.labelOffset, (isRotated) ? me.top + 12 : options.position === "top" ? me.bottom - tl : me.top + tl);
|
|
||||||
context.rotate(labelRotationRadians * -1);
|
|
||||||
context.font = tickLabelFont;
|
|
||||||
context.textAlign = (isRotated) ? "right" : "center";
|
|
||||||
context.textBaseline = (isRotated) ? "middle" : options.position === "top" ? "bottom" : "top";
|
|
||||||
|
|
||||||
if (helpers.isArray(label)) {
|
|
||||||
for (var i = 0, y = 0; i < label.length; ++i) {
|
|
||||||
// We just make sure the multiline element is a string here..
|
|
||||||
context.fillText('' + label[i], 0, y);
|
|
||||||
// apply same lineSpacing as calculated @ L#320
|
|
||||||
y += (tickFontSize * 1.5);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
context.fillText(label, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
context.restore();
|
|
||||||
}
|
|
||||||
}, me);
|
|
||||||
|
|
||||||
if (scaleLabel.display) {
|
|
||||||
// Draw the scale label
|
|
||||||
context.textAlign = "center";
|
|
||||||
context.textBaseline = 'middle';
|
|
||||||
context.fillStyle = scaleLabelFontColor; // render in correct colour
|
|
||||||
context.font = scaleLabelFont;
|
|
||||||
|
|
||||||
scaleLabelX = me.left + ((me.right - me.left) / 2); // midpoint of the width
|
|
||||||
scaleLabelY = options.position === 'bottom' ? me.bottom - (scaleLabelFontSize / 2) : me.top + (scaleLabelFontSize / 2);
|
|
||||||
|
|
||||||
context.fillText(scaleLabel.labelString, scaleLabelX, scaleLabelY);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
var isLastTick = me.ticks.length === index + 1;
|
||||||
var xTickStart = options.position === "right" ? me.left : me.right - 5;
|
|
||||||
var xTickEnd = options.position === "right" ? me.left + 5 : me.right;
|
|
||||||
|
|
||||||
helpers.each(me.ticks, function (label, index) {
|
// Since we always show the last tick,we need may need to hide the last shown one before
|
||||||
// If the callback returned a null or undefined value, do not draw this line
|
var shouldSkip = (skipRatio > 1 && index % skipRatio > 0) || (index % skipRatio === 0 && index + skipRatio >= me.ticks.length);
|
||||||
if (label === undefined || label === null) {
|
if (shouldSkip && !isLastTick || (label === undefined || label === null)) {
|
||||||
return;
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var lineWidth, lineColor;
|
||||||
|
if (index === (typeof me.zeroLineIndex !== 'undefined' ? me.zeroLineIndex : 0)) {
|
||||||
|
// Draw the first index specially
|
||||||
|
lineWidth = gridLines.zeroLineWidth;
|
||||||
|
lineColor = gridLines.zeroLineColor;
|
||||||
|
} else {
|
||||||
|
lineWidth = helpers.getValueAtIndexOrDefault(gridLines.lineWidth, index);
|
||||||
|
lineColor = helpers.getValueAtIndexOrDefault(gridLines.color, index);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Common properties
|
||||||
|
var tx1, ty1, tx2, ty2, x1, y1, x2, y2, labelX, labelY;
|
||||||
|
var textAlign, textBaseline = 'middle';
|
||||||
|
|
||||||
|
if (isHorizontal) {
|
||||||
|
if (!isRotated) {
|
||||||
|
textBaseline = options.position === 'top' ? 'bottom' : 'top';
|
||||||
|
}
|
||||||
|
|
||||||
|
textAlign = isRotated ? 'right' : 'center';
|
||||||
|
|
||||||
|
var xLineValue = me.getPixelForTick(index) + helpers.aliasPixel(lineWidth); // xvalues for grid lines
|
||||||
|
labelX = me.getPixelForTick(index, gridLines.offsetGridLines) + optionTicks.labelOffset; // x values for optionTicks (need to consider offsetLabel option)
|
||||||
|
labelY = (isRotated) ? me.top + 12 : options.position === 'top' ? me.bottom - tl : me.top + tl;
|
||||||
|
|
||||||
|
tx1 = tx2 = x1 = x2 = xLineValue;
|
||||||
|
ty1 = yTickStart;
|
||||||
|
ty2 = yTickEnd;
|
||||||
|
y1 = chartArea.top;
|
||||||
|
y2 = chartArea.bottom;
|
||||||
|
} else {
|
||||||
|
if (options.position === 'left') {
|
||||||
|
if (optionTicks.mirror) {
|
||||||
|
labelX = me.right + optionTicks.padding;
|
||||||
|
textAlign = 'left';
|
||||||
|
} else {
|
||||||
|
labelX = me.right - optionTicks.padding;
|
||||||
|
textAlign = 'right';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// right side
|
||||||
|
if (optionTicks.mirror) {
|
||||||
|
labelX = me.left - optionTicks.padding;
|
||||||
|
textAlign = 'right';
|
||||||
|
} else {
|
||||||
|
labelX = me.left + optionTicks.padding;
|
||||||
|
textAlign = 'left';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var yLineValue = me.getPixelForTick(index); // xvalues for grid lines
|
var yLineValue = me.getPixelForTick(index); // xvalues for grid lines
|
||||||
|
yLineValue += helpers.aliasPixel(lineWidth);
|
||||||
|
labelY = me.getPixelForTick(index, gridLines.offsetGridLines);
|
||||||
|
|
||||||
if (gridLines.display) {
|
tx1 = xTickStart;
|
||||||
if (index === (typeof me.zeroLineIndex !== 'undefined' ? me.zeroLineIndex : 0)) {
|
tx2 = xTickEnd;
|
||||||
// Draw the first index specially
|
x1 = chartArea.left;
|
||||||
context.lineWidth = gridLines.zeroLineWidth;
|
x2 = chartArea.right;
|
||||||
context.strokeStyle = gridLines.zeroLineColor;
|
ty1 = ty2 = y1 = y2 = yLineValue;
|
||||||
} else {
|
}
|
||||||
context.lineWidth = helpers.getValueAtIndexOrDefault(gridLines.lineWidth, index);
|
|
||||||
context.strokeStyle = helpers.getValueAtIndexOrDefault(gridLines.color, index);
|
|
||||||
}
|
|
||||||
|
|
||||||
yLineValue += helpers.aliasPixel(context.lineWidth);
|
itemsToDraw.push({
|
||||||
|
tx1: tx1,
|
||||||
|
ty1: ty1,
|
||||||
|
tx2: tx2,
|
||||||
|
ty2: ty2,
|
||||||
|
x1: x1,
|
||||||
|
y1: y1,
|
||||||
|
x2: x2,
|
||||||
|
y2: y2,
|
||||||
|
labelX: labelX,
|
||||||
|
labelY: labelY,
|
||||||
|
glWidth: lineWidth,
|
||||||
|
glColor: lineColor,
|
||||||
|
rotation: -1 * labelRotationRadians,
|
||||||
|
label: label,
|
||||||
|
textBaseline: textBaseline,
|
||||||
|
textAlign: textAlign
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// Draw the label area
|
// Draw all of the tick labels, tick marks, and grid lines at the correct places
|
||||||
context.beginPath();
|
helpers.each(itemsToDraw, function(itemToDraw) {
|
||||||
|
if (gridLines.display) {
|
||||||
|
context.lineWidth = itemToDraw.glWidth;
|
||||||
|
context.strokeStyle = itemToDraw.glColor;
|
||||||
|
|
||||||
if (gridLines.drawTicks) {
|
context.beginPath();
|
||||||
context.moveTo(xTickStart, yLineValue);
|
|
||||||
context.lineTo(xTickEnd, yLineValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw the chart area
|
if (gridLines.drawTicks) {
|
||||||
if (gridLines.drawOnChartArea) {
|
context.moveTo(itemToDraw.tx1, itemToDraw.ty1);
|
||||||
context.moveTo(chartArea.left, yLineValue);
|
context.lineTo(itemToDraw.tx2, itemToDraw.ty2);
|
||||||
context.lineTo(chartArea.right, yLineValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Need to stroke in the loop because we are potentially changing line widths & colours
|
|
||||||
context.stroke();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (optionTicks.display) {
|
if (gridLines.drawOnChartArea) {
|
||||||
var xLabelValue;
|
context.moveTo(itemToDraw.x1, itemToDraw.y1);
|
||||||
var yLabelValue = me.getPixelForTick(index, gridLines.offsetGridLines); // x values for optionTicks (need to consider offsetLabel option)
|
context.lineTo(itemToDraw.x2, itemToDraw.y2);
|
||||||
|
|
||||||
context.save();
|
|
||||||
|
|
||||||
if (options.position === "left") {
|
|
||||||
if (optionTicks.mirror) {
|
|
||||||
xLabelValue = me.right + optionTicks.padding;
|
|
||||||
context.textAlign = "left";
|
|
||||||
} else {
|
|
||||||
xLabelValue = me.right - optionTicks.padding;
|
|
||||||
context.textAlign = "right";
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// right side
|
|
||||||
if (optionTicks.mirror) {
|
|
||||||
xLabelValue = me.left - optionTicks.padding;
|
|
||||||
context.textAlign = "right";
|
|
||||||
} else {
|
|
||||||
xLabelValue = me.left + optionTicks.padding;
|
|
||||||
context.textAlign = "left";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
context.translate(xLabelValue, yLabelValue + optionTicks.labelOffset);
|
|
||||||
context.rotate(labelRotationRadians * -1);
|
|
||||||
context.font = tickLabelFont;
|
|
||||||
context.textBaseline = "middle";
|
|
||||||
context.fillText(label, 0, 0);
|
|
||||||
context.restore();
|
|
||||||
}
|
}
|
||||||
}, me);
|
|
||||||
|
|
||||||
if (scaleLabel.display) {
|
context.stroke();
|
||||||
// Draw the scale label
|
}
|
||||||
scaleLabelX = options.position === 'left' ? me.left + (scaleLabelFontSize / 2) : me.right - (scaleLabelFontSize / 2);
|
|
||||||
scaleLabelY = me.top + ((me.bottom - me.top) / 2);
|
|
||||||
var rotation = options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
|
|
||||||
|
|
||||||
|
if (optionTicks.display) {
|
||||||
context.save();
|
context.save();
|
||||||
context.translate(scaleLabelX, scaleLabelY);
|
context.translate(itemToDraw.labelX, itemToDraw.labelY);
|
||||||
context.rotate(rotation);
|
context.rotate(itemToDraw.rotation);
|
||||||
context.textAlign = "center";
|
context.font = tickLabelFont;
|
||||||
context.fillStyle = scaleLabelFontColor; // render in correct colour
|
context.textBaseline = itemToDraw.textBaseline;
|
||||||
context.font = scaleLabelFont;
|
context.textAlign = itemToDraw.textAlign;
|
||||||
context.textBaseline = 'middle';
|
|
||||||
context.fillText(scaleLabel.labelString, 0, 0);
|
var label = itemToDraw.label;
|
||||||
|
if (helpers.isArray(label)) {
|
||||||
|
for (var i = 0, y = 0; i < label.length; ++i) {
|
||||||
|
// We just make sure the multiline element is a string here..
|
||||||
|
context.fillText('' + label[i], 0, y);
|
||||||
|
// apply same lineSpacing as calculated @ L#320
|
||||||
|
y += (tickFontSize * 1.5);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
context.fillText(label, 0, 0);
|
||||||
|
}
|
||||||
context.restore();
|
context.restore();
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (scaleLabel.display) {
|
||||||
|
// Draw the scale label
|
||||||
|
var scaleLabelX;
|
||||||
|
var scaleLabelY;
|
||||||
|
var rotation = 0;
|
||||||
|
|
||||||
|
if (isHorizontal) {
|
||||||
|
scaleLabelX = me.left + ((me.right - me.left) / 2); // midpoint of the width
|
||||||
|
scaleLabelY = options.position === 'bottom' ? me.bottom - (scaleLabelFontSize / 2) : me.top + (scaleLabelFontSize / 2);
|
||||||
|
} else {
|
||||||
|
var isLeft = options.position === 'left';
|
||||||
|
scaleLabelX = isLeft ? me.left + (scaleLabelFontSize / 2) : me.right - (scaleLabelFontSize / 2);
|
||||||
|
scaleLabelY = me.top + ((me.bottom - me.top) / 2);
|
||||||
|
rotation = isLeft ? -0.5 * Math.PI : 0.5 * Math.PI;
|
||||||
|
}
|
||||||
|
|
||||||
|
context.save();
|
||||||
|
context.translate(scaleLabelX, scaleLabelY);
|
||||||
|
context.rotate(rotation);
|
||||||
|
context.textAlign = 'center';
|
||||||
|
context.textBaseline = 'middle';
|
||||||
|
context.fillStyle = scaleLabelFontColor; // render in correct colour
|
||||||
|
context.font = scaleLabelFont;
|
||||||
|
context.fillText(scaleLabel.labelString, 0, 0);
|
||||||
|
context.restore();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (gridLines.drawBorder) {
|
if (gridLines.drawBorder) {
|
||||||
@ -734,7 +734,7 @@ module.exports = function(Chart) {
|
|||||||
y2 = me.bottom;
|
y2 = me.bottom;
|
||||||
|
|
||||||
var aliasPixel = helpers.aliasPixel(context.lineWidth);
|
var aliasPixel = helpers.aliasPixel(context.lineWidth);
|
||||||
if (me.isHorizontal()) {
|
if (isHorizontal) {
|
||||||
y1 = y2 = options.position === 'top' ? me.bottom : me.top;
|
y1 = y2 = options.position === 'top' ? me.bottom : me.top;
|
||||||
y1 += aliasPixel;
|
y1 += aliasPixel;
|
||||||
y2 += aliasPixel;
|
y2 += aliasPixel;
|
||||||
|
Loading…
Reference in New Issue
Block a user