From: Blake Niemyjski Date: Sat, 14 May 2016 03:07:39 +0000 (-0500) Subject: Performance and minification improvements X-Git-Tag: v2.1.4~26^2~4 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=bea68f142406df0eed7cbd5b63e621ddc406de08;p=thirdparty%2FChart.js.git Performance and minification improvements --- diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..4e0d877ef --- /dev/null +++ b/.editorconfig @@ -0,0 +1,10 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = tab +indent_size = 4 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = false diff --git a/src/charts/Chart.Radar.js b/src/charts/Chart.Radar.js index c8560ec7b..322c4544a 100644 --- a/src/charts/Chart.Radar.js +++ b/src/charts/Chart.Radar.js @@ -1,15 +1,9 @@ "use strict"; module.exports = function(Chart) { - - var helpers = Chart.helpers; - - var defaultConfig = { - aspectRatio: 1 - }; - + Chart.Radar = function(context, config) { - config.options = helpers.configMerge(defaultConfig, config.options); + config.options = Chart.helpers.configMerge({ aspectRatio: 1 }, config.options); config.type = 'radar'; return new Chart(context, config); diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 103f26570..bf3e50b3d 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -96,6 +96,10 @@ module.exports = function(Chart) { yScalePoint = yScale.getPixelForValue(0); } + var rectangleElementOptions = this.chart.options.elements.rectangle; + var custom = rectangle.custom; + var dataset = this.getDataset(); + helpers.extend(rectangle, { // Utility _chart: this.chart.chart, @@ -112,15 +116,15 @@ module.exports = function(Chart) { // Tooltip label: this.chart.data.labels[index], - datasetLabel: this.getDataset().label, + datasetLabel: dataset.label, // Appearance base: reset ? yScalePoint : this.calculateBarBase(this.index, index), width: this.calculateBarWidth(numBars), - backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor), - borderSkipped: rectangle.custom && rectangle.custom.borderSkipped ? rectangle.custom.borderSkipped : this.chart.options.elements.rectangle.borderSkipped, - borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor), - borderWidth: rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth) + backgroundColor: custom && custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor), + borderSkipped: custom && custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped, + borderColor: custom && custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor), + borderWidth: custom && custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth) } }); rectangle.pivot(); @@ -134,22 +138,23 @@ module.exports = function(Chart) { var base = 0; if (yScale.options.stacked) { - - var value = this.chart.data.datasets[datasetIndex].data[index]; + var chart = this.chart; + var datasets = chart.data.datasets; + var value = datasets[datasetIndex].data[index]; if (value < 0) { for (var i = 0; i < datasetIndex; i++) { - var negDS = this.chart.data.datasets[i]; - var negDSMeta = this.chart.getDatasetMeta(i); - if (negDSMeta.bar && negDSMeta.yAxisID === yScale.id && this.chart.isDatasetVisible(i)) { + var negDS = datasets[i]; + var negDSMeta = chart.getDatasetMeta(i); + if (negDSMeta.bar && negDSMeta.yAxisID === yScale.id && chart.isDatasetVisible(i)) { base += negDS.data[index] < 0 ? negDS.data[index] : 0; } } } else { for (var j = 0; j < datasetIndex; j++) { - var posDS = this.chart.data.datasets[j]; - var posDSMeta = this.chart.getDatasetMeta(j); - if (posDSMeta.bar && posDSMeta.yAxisID === yScale.id && this.chart.isDatasetVisible(j)) { + var posDS = datasets[j]; + var posDSMeta = chart.getDatasetMeta(j); + if (posDSMeta.bar && posDSMeta.yAxisID === yScale.id && chart.isDatasetVisible(j)) { base += posDS.data[index] > 0 ? posDS.data[index] : 0; } } @@ -299,18 +304,18 @@ module.exports = function(Chart) { var dataset = this.chart.data.datasets[rectangle._datasetIndex]; var index = rectangle._index; - rectangle._model.backgroundColor = rectangle.custom && rectangle.custom.hoverBackgroundColor ? rectangle.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(rectangle._model.backgroundColor)); - rectangle._model.borderColor = rectangle.custom && rectangle.custom.hoverBorderColor ? rectangle.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(rectangle._model.borderColor)); - rectangle._model.borderWidth = rectangle.custom && rectangle.custom.hoverBorderWidth ? rectangle.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, rectangle._model.borderWidth); + rectangle._model.backgroundColor = customr && customr.hoverBackgroundColor ? customr.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(rectangle._model.backgroundColor)); + rectangle._model.borderColor = customr && customr.hoverBorderColor ? customr.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(rectangle._model.borderColor)); + rectangle._model.borderWidth = customr && customr.hoverBorderWidth ? customr.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, rectangle._model.borderWidth); }, removeHoverStyle: function(rectangle) { var dataset = this.chart.data.datasets[rectangle._datasetIndex]; var index = rectangle._index; - rectangle._model.backgroundColor = rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor); - rectangle._model.borderColor = rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor); - rectangle._model.borderWidth = rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth); + rectangle._model.backgroundColor = customr && customr.backgroundColor ? customr.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor); + rectangle._model.borderColor = customr && customr.borderColor ? customr.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor); + rectangle._model.borderWidth = customr && customr.borderWidth ? customr.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth); } }); @@ -408,10 +413,10 @@ module.exports = function(Chart) { // Appearance base: reset ? xScalePoint : this.calculateBarBase(this.index, index), height: this.calculateBarHeight(numBars), - backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor), - borderSkipped: rectangle.custom && rectangle.custom.borderSkipped ? rectangle.custom.borderSkipped : this.chart.options.elements.rectangle.borderSkipped, - borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor), - borderWidth: rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth) + backgroundColor: customr && customr.backgroundColor ? customr.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor), + borderSkipped: customr && customr.borderSkipped ? customr.borderSkipped : this.chart.options.elements.rectangle.borderSkipped, + borderColor: customr && customr.borderColor ? customr.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor), + borderWidth: customr && customr.borderWidth ? customr.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth) }, draw: function () { diff --git a/src/core/core.controller.js b/src/core/core.controller.js index aa6be982a..ca38642cb 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -279,10 +279,11 @@ module.exports = function(Chart) { render: function render(duration, lazy) { Chart.pluginService.notifyPlugins('beforeRender', [this]); - if (this.options.animation && ((typeof duration !== 'undefined' && duration !== 0) || (typeof duration === 'undefined' && this.options.animation.duration !== 0))) { + var animationOptions = this.options.animation; + if (animationOptions && ((typeof duration !== 'undefined' && duration !== 0) || (typeof duration === 'undefined' && animationOptions.duration !== 0))) { var animation = new Chart.Animation(); - animation.numSteps = (duration || this.options.animation.duration) / 16.66; //60 fps - animation.easing = this.options.animation.easing; + animation.numSteps = (duration || animationOptions.duration) / 16.66; //60 fps + animation.easing = animationOptions.easing; // render function animation.render = function(chartInstance, animationObject) { @@ -294,14 +295,14 @@ module.exports = function(Chart) { }; // user events - animation.onAnimationProgress = this.options.animation.onProgress; - animation.onAnimationComplete = this.options.animation.onComplete; + animation.onAnimationProgress = animationOptions.onProgress; + animation.onAnimationComplete = animationOptions.onComplete; Chart.animationService.addAnimation(this, animation, duration, lazy); } else { this.draw(); - if (this.options.animation && this.options.animation.onComplete && this.options.animation.onComplete.call) { - this.options.animation.onComplete.call(this); + if (animationOptions && animationOptions.onComplete && animationOptions.onComplete.call) { + animationOptions.onComplete.call(this); } } return this; @@ -322,10 +323,11 @@ module.exports = function(Chart) { } // Clip out the chart area so that anything outside does not draw. This is necessary for zoom and pan to function - this.chart.ctx.save(); - this.chart.ctx.beginPath(); - this.chart.ctx.rect(this.chartArea.left, this.chartArea.top, this.chartArea.right - this.chartArea.left, this.chartArea.bottom - this.chartArea.top); - this.chart.ctx.clip(); + var context = this.chart.ctx; + context.save(); + context.beginPath(); + context.rect(this.chartArea.left, this.chartArea.top, this.chartArea.right - this.chartArea.left, this.chartArea.bottom - this.chartArea.top); + context.clip(); // Draw each dataset via its respective controller (reversed to support proper line stacking) helpers.each(this.data.datasets, function(dataset, datasetIndex) { @@ -335,7 +337,7 @@ module.exports = function(Chart) { }, this, true); // Restore from the clipping operation - this.chart.ctx.restore(); + context.restore(); // Finally draw the tooltip this.tooltip.transition(easingDecimal).draw(); @@ -540,13 +542,15 @@ module.exports = function(Chart) { if (this.lastActive.length) { switch (this.options.hover.mode) { case 'single': - this.getDatasetMeta(this.lastActive[0]._datasetIndex).controller.removeHoverStyle(this.lastActive[0], this.lastActive[0]._datasetIndex, this.lastActive[0]._index); + var lastActive = this.lastActive[0]; + this.getDatasetMeta(lastActive._datasetIndex).controller.removeHoverStyle(lastActive, lastActive._datasetIndex, lastActive._index); break; case 'label': case 'dataset': for (var i = 0; i < this.lastActive.length; i++) { - if (this.lastActive[i]) - this.getDatasetMeta(this.lastActive[i]._datasetIndex).controller.removeHoverStyle(this.lastActive[i], this.lastActive[i]._datasetIndex, this.lastActive[i]._index); + var lastActive = this.lastActive[i]; + if (lastActive) + this.getDatasetMeta(lastActive._datasetIndex).controller.removeHoverStyle(lastActive, lastActive._datasetIndex, lastActive._index); } break; default: @@ -558,13 +562,15 @@ module.exports = function(Chart) { if (this.active.length && this.options.hover.mode) { switch (this.options.hover.mode) { case 'single': - this.getDatasetMeta(this.active[0]._datasetIndex).controller.setHoverStyle(this.active[0]); + var active = this.active[0]; + this.getDatasetMeta(active._datasetIndex).controller.setHoverStyle(active); break; case 'label': case 'dataset': for (var j = 0; j < this.active.length; j++) { - if (this.active[j]) - this.getDatasetMeta(this.active[j]._datasetIndex).controller.setHoverStyle(this.active[j]); + var active = this.active[j]; + if (active) + this.getDatasetMeta(active._datasetIndex).controller.setHoverStyle(active); } break; default: @@ -572,18 +578,18 @@ module.exports = function(Chart) { } } - + var tooltip = this.tooltip; // Built in Tooltips if (this.options.tooltips.enabled || this.options.tooltips.custom) { // The usual updates - this.tooltip.initialize(); - this.tooltip._active = this.tooltipActive; - this.tooltip.update(true); + tooltip.initialize(); + tooltip._active = this.tooltipActive; + tooltip.update(true); } // Hover animations - this.tooltip.pivot(); + tooltip.pivot(); if (!this.animating) { var changed; @@ -608,7 +614,7 @@ module.exports = function(Chart) { this.stop(); if (this.options.tooltips.enabled || this.options.tooltips.custom) { - this.tooltip.update(true); + tooltip.update(true); } // We only need to render at this point. Updating will cause scales to be recomputed generating flicker & using more diff --git a/src/core/core.plugin.js b/src/core/core.plugin.js index 01c8db6ab..31be4d48b 100644 --- a/src/core/core.plugin.js +++ b/src/core/core.plugin.js @@ -56,6 +56,6 @@ module.exports = function(Chart) { afterDraw: noop, // Called during destroy - destroy: noop, + destroy: noop }); }; diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 31a9b8a2a..81303bc36 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -3,6 +3,7 @@ module.exports = function(Chart) { var helpers = Chart.helpers; + var globalDefaults = Chart.defaults.global; Chart.defaults.scale = { display: true, @@ -180,19 +181,22 @@ module.exports = function(Chart) { helpers.callCallback(this.options.beforeCalculateTickRotation, [this]); }, calculateTickRotation: function() { + var context = this.ctx; + var optionTicks = this.options.ticks; + //Get the width of each grid by calculating the difference //between x offsets between 0 and 1. - var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize); - var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle); - var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily); + var tickFontSize = helpers.getValueOrDefault(optionTicks.fontSize, globalDefaults.defaultFontSize); + var tickFontStyle = helpers.getValueOrDefault(optionTicks.fontStyle, globalDefaults.defaultFontStyle); + var tickFontFamily = helpers.getValueOrDefault(optionTicks.fontFamily, globalDefaults.defaultFontFamily); var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily); - this.ctx.font = tickLabelFont; + context.font = tickLabelFont; - var firstWidth = this.ctx.measureText(this.ticks[0]).width; - var lastWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width; + var firstWidth = context.measureText(this.ticks[0]).width; + var lastWidth = context.measureText(this.ticks[this.ticks.length - 1]).width; var firstRotated; - this.labelRotation = this.options.ticks.minRotation || 0; + this.labelRotation = optionTicks.minRotation || 0; this.paddingRight = 0; this.paddingLeft = 0; @@ -204,7 +208,7 @@ module.exports = function(Chart) { if (!this.longestTextCache) { this.longestTextCache = {}; } - var originalLabelWidth = helpers.longestText(this.ctx, tickLabelFont, this.ticks, this.longestTextCache); + var originalLabelWidth = helpers.longestText(context, tickLabelFont, this.ticks, this.longestTextCache); var labelWidth = originalLabelWidth; var cosRotation; var sinRotation; @@ -214,7 +218,7 @@ module.exports = function(Chart) { var tickWidth = this.getPixelForTick(1) - this.getPixelForTick(0) - 6; //Max label rotation can be set or default to 90 - also act as a loop counter - while (labelWidth > tickWidth && this.labelRotation < this.options.ticks.maxRotation) { + while (labelWidth > tickWidth && this.labelRotation < optionTicks.maxRotation) { cosRotation = Math.cos(helpers.toRadians(this.labelRotation)); sinRotation = Math.sin(helpers.toRadians(this.labelRotation)); @@ -263,18 +267,17 @@ module.exports = function(Chart) { var opts = this.options; var tickOpts = opts.ticks; var scaleLabelOpts = opts.scaleLabel; - var globalOpts = Chart.defaults.global; var display = opts.display; var isHorizontal = this.isHorizontal(); - var tickFontSize = helpers.getValueOrDefault(tickOpts.fontSize, globalOpts.defaultFontSize); - var tickFontStyle = helpers.getValueOrDefault(tickOpts.fontStyle, globalOpts.defaultFontStyle); - var tickFontFamily = helpers.getValueOrDefault(tickOpts.fontFamily, globalOpts.defaultFontFamily); + var tickFontSize = helpers.getValueOrDefault(tickOpts.fontSize, globalDefaults.defaultFontSize); + var tickFontStyle = helpers.getValueOrDefault(tickOpts.fontStyle, globalDefaults.defaultFontStyle); + var tickFontFamily = helpers.getValueOrDefault(tickOpts.fontFamily, globalDefaults.defaultFontFamily); var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily); - var scaleLabelFontSize = helpers.getValueOrDefault(scaleLabelOpts.fontSize, globalOpts.defaultFontSize); - var scaleLabelFontStyle = helpers.getValueOrDefault(scaleLabelOpts.fontStyle, globalOpts.defaultFontStyle); - var scaleLabelFontFamily = helpers.getValueOrDefault(scaleLabelOpts.fontFamily, globalOpts.defaultFontFamily); + var scaleLabelFontSize = helpers.getValueOrDefault(scaleLabelOpts.fontSize, globalDefaults.defaultFontSize); + var scaleLabelFontStyle = helpers.getValueOrDefault(scaleLabelOpts.fontStyle, globalDefaults.defaultFontStyle); + var scaleLabelFontFamily = helpers.getValueOrDefault(scaleLabelOpts.fontFamily, globalDefaults.defaultFontFamily); var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily); var tickMarkLength = opts.gridLines.tickMarkLength; @@ -450,42 +453,46 @@ module.exports = function(Chart) { // @param {rectangle} chartArea : the area of the chart to draw full grid lines on draw: function(chartArea) { if (this.options.display) { + var context = this.ctx; + var ticks = this.options.ticks; + var gridLines = this.options.gridLines; + var scaleLabel = this.options.scaleLabel; var setContextLineSettings; var isRotated = this.labelRotation !== 0; var skipRatio; var scaleLabelX; var scaleLabelY; - var useAutoskipper = this.options.ticks.autoSkip; +] var useAutoskipper = ticks.autoSkip; // figure out the maximum number of gridlines to show var maxTicks; - - if (this.options.ticks.maxTicksLimit) { - maxTicks = this.options.ticks.maxTicksLimit; + if (ticks.maxTicksLimit) { + maxTicks = ticks.maxTicksLimit; } - var tickFontColor = helpers.getValueOrDefault(this.options.ticks.fontColor, Chart.defaults.global.defaultFontColor); - var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize); - var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle); - var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily); + var tickFontColor = helpers.getValueOrDefault(ticks.fontColor, globalDefaults.defaultFontColor); + var tickFontSize = helpers.getValueOrDefault(ticks.fontSize, globalDefaults.defaultFontSize); + var tickFontStyle = helpers.getValueOrDefault(ticks.fontStyle, globalDefaults.defaultFontStyle); + var tickFontFamily = helpers.getValueOrDefault(ticks.fontFamily, globalDefaults.defaultFontFamily); var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily); - var tl = this.options.gridLines.tickMarkLength; + var tl = gridLines.tickMarkLength; - var scaleLabelFontColor = helpers.getValueOrDefault(this.options.scaleLabel.fontColor, Chart.defaults.global.defaultFontColor); - var scaleLabelFontSize = helpers.getValueOrDefault(this.options.scaleLabel.fontSize, Chart.defaults.global.defaultFontSize); - var scaleLabelFontStyle = helpers.getValueOrDefault(this.options.scaleLabel.fontStyle, Chart.defaults.global.defaultFontStyle); - var scaleLabelFontFamily = helpers.getValueOrDefault(this.options.scaleLabel.fontFamily, Chart.defaults.global.defaultFontFamily); + var scaleLabelFontColor = helpers.getValueOrDefault(scaleLabel.fontColor, globalDefaults.defaultFontColor); + var scaleLabelFontSize = helpers.getValueOrDefault(scaleLabel.fontSize, globalDefaults.defaultFontSize); + var scaleLabelFontStyle = helpers.getValueOrDefault(scaleLabel.fontStyle, globalDefaults.defaultFontStyle); + var scaleLabelFontFamily = helpers.getValueOrDefault(scaleLabel.fontFamily, globalDefaults.defaultFontFamily); var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily); - var cosRotation = Math.cos(helpers.toRadians(this.labelRotation)); - var sinRotation = Math.sin(helpers.toRadians(this.labelRotation)); + var labelRotationRadians = helpers.toRadians(this.labelRotation); + var cosRotation = Math.cos(labelRotationRadians); + var sinRotation = Math.sin(labelRotationRadians); var longestRotatedLabel = this.longestLabelWidth * cosRotation; var rotatedLabelHeight = tickFontSize * sinRotation; // Make sure we draw text in the correct color and font - this.ctx.fillStyle = tickFontColor; + context.fillStyle = tickFontColor; if (this.isHorizontal()) { setContextLineSettings = true; @@ -493,8 +500,8 @@ module.exports = function(Chart) { var yTickEnd = this.options.position === "bottom" ? this.top + tl : this.bottom; skipRatio = false; - if (((longestRotatedLabel / 2) + this.options.ticks.autoSkipPadding) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) { - skipRatio = 1 + Math.floor((((longestRotatedLabel / 2) + this.options.ticks.autoSkipPadding) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight))); + if (((longestRotatedLabel / 2) + ticks.autoSkipPadding) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) { + skipRatio = 1 + Math.floor((((longestRotatedLabel / 2) + ticks.autoSkipPadding) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight))); } // if they defined a max number of ticks, @@ -522,63 +529,63 @@ module.exports = function(Chart) { return; } var xLineValue = this.getPixelForTick(index); // xvalues for grid lines - var xLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option) + var xLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option) - if (this.options.gridLines.display) { + if (gridLines.display) { if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) { // Draw the first index specially - this.ctx.lineWidth = this.options.gridLines.zeroLineWidth; - this.ctx.strokeStyle = this.options.gridLines.zeroLineColor; + context.lineWidth = gridLines.zeroLineWidth; + context.strokeStyle = gridLines.zeroLineColor; setContextLineSettings = true; // reset next time } else if (setContextLineSettings) { - this.ctx.lineWidth = this.options.gridLines.lineWidth; - this.ctx.strokeStyle = this.options.gridLines.color; + context.lineWidth = gridLines.lineWidth; + context.strokeStyle = gridLines.color; setContextLineSettings = false; } - xLineValue += helpers.aliasPixel(this.ctx.lineWidth); + xLineValue += helpers.aliasPixel(context.lineWidth); // Draw the label area - this.ctx.beginPath(); + context.beginPath(); - if (this.options.gridLines.drawTicks) { - this.ctx.moveTo(xLineValue, yTickStart); - this.ctx.lineTo(xLineValue, yTickEnd); + if (gridLines.drawTicks) { + context.moveTo(xLineValue, yTickStart); + context.lineTo(xLineValue, yTickEnd); } // Draw the chart area - if (this.options.gridLines.drawOnChartArea) { - this.ctx.moveTo(xLineValue, chartArea.top); - this.ctx.lineTo(xLineValue, chartArea.bottom); + 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 - this.ctx.stroke(); + context.stroke(); } - if (this.options.ticks.display) { - this.ctx.save(); - this.ctx.translate(xLabelValue + this.options.ticks.labelOffset, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - tl : this.top + tl); - this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1); - this.ctx.font = tickLabelFont; - this.ctx.textAlign = (isRotated) ? "right" : "center"; - this.ctx.textBaseline = (isRotated) ? "middle" : this.options.position === "top" ? "bottom" : "top"; - this.ctx.fillText(label, 0, 0); - this.ctx.restore(); + if (ticks.display) { + context.save(); + context.translate(xLabelValue + ticks.labelOffset, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - tl : this.top + tl); + context.rotate(labelRotationRadians * -1); + context.font = tickLabelFont; + context.textAlign = (isRotated) ? "right" : "center"; + context.textBaseline = (isRotated) ? "middle" : this.options.position === "top" ? "bottom" : "top"; + context.fillText(label, 0, 0); + context.restore(); } }, this); - if (this.options.scaleLabel.display) { + if (scaleLabel.display) { // Draw the scale label - this.ctx.textAlign = "center"; - this.ctx.textBaseline = 'middle'; - this.ctx.fillStyle = scaleLabelFontColor; // render in correct colour - this.ctx.font = scaleLabelFont; + context.textAlign = "center"; + context.textBaseline = 'middle'; + context.fillStyle = scaleLabelFontColor; // render in correct colour + context.font = scaleLabelFont; scaleLabelX = this.left + ((this.right - this.left) / 2); // midpoint of the width scaleLabelY = this.options.position === 'bottom' ? this.bottom - (scaleLabelFontSize / 2) : this.top + (scaleLabelFontSize / 2); - this.ctx.fillText(this.options.scaleLabel.labelString, scaleLabelX, scaleLabelY); + context.fillText(scaleLabel.labelString, scaleLabelX, scaleLabelY); } } else { @@ -594,112 +601,113 @@ module.exports = function(Chart) { var yLineValue = this.getPixelForTick(index); // xvalues for grid lines - if (this.options.gridLines.display) { + if (gridLines.display) { if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) { // Draw the first index specially - this.ctx.lineWidth = this.options.gridLines.zeroLineWidth; - this.ctx.strokeStyle = this.options.gridLines.zeroLineColor; + context.lineWidth = gridLines.zeroLineWidth; + context.strokeStyle = gridLines.zeroLineColor; setContextLineSettings = true; // reset next time } else if (setContextLineSettings) { - this.ctx.lineWidth = this.options.gridLines.lineWidth; - this.ctx.strokeStyle = this.options.gridLines.color; + context.lineWidth = gridLines.lineWidth; + context.strokeStyle = gridLines.color; setContextLineSettings = false; } - yLineValue += helpers.aliasPixel(this.ctx.lineWidth); + yLineValue += helpers.aliasPixel(context.lineWidth); // Draw the label area - this.ctx.beginPath(); + context.beginPath(); - if (this.options.gridLines.drawTicks) { - this.ctx.moveTo(xTickStart, yLineValue); - this.ctx.lineTo(xTickEnd, yLineValue); + if (gridLines.drawTicks) { + context.moveTo(xTickStart, yLineValue); + context.lineTo(xTickEnd, yLineValue); } // Draw the chart area - if (this.options.gridLines.drawOnChartArea) { - this.ctx.moveTo(chartArea.left, yLineValue); - this.ctx.lineTo(chartArea.right, yLineValue); + if (gridLines.drawOnChartArea) { + context.moveTo(chartArea.left, yLineValue); + context.lineTo(chartArea.right, yLineValue); } // Need to stroke in the loop because we are potentially changing line widths & colours - this.ctx.stroke(); + context.stroke(); } - if (this.options.ticks.display) { + if (ticks.display) { var xLabelValue; - var yLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option) + var yLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option) - this.ctx.save(); + context.save(); if (this.options.position === "left") { - if (this.options.ticks.mirror) { - xLabelValue = this.right + this.options.ticks.padding; - this.ctx.textAlign = "left"; + if (ticks.mirror) { + xLabelValue = this.right + ticks.padding; + context.textAlign = "left"; } else { - xLabelValue = this.right - this.options.ticks.padding; - this.ctx.textAlign = "right"; + xLabelValue = this.right - ticks.padding; + context.textAlign = "right"; } } else { // right side - if (this.options.ticks.mirror) { - xLabelValue = this.left - this.options.ticks.padding; - this.ctx.textAlign = "right"; + if (ticks.mirror) { + xLabelValue = this.left - ticks.padding; + context.textAlign = "right"; } else { - xLabelValue = this.left + this.options.ticks.padding; - this.ctx.textAlign = "left"; + xLabelValue = this.left + ticks.padding; + context.textAlign = "left"; } } - this.ctx.translate(xLabelValue, yLabelValue + this.options.ticks.labelOffset); - this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1); - this.ctx.font = tickLabelFont; - this.ctx.textBaseline = "middle"; - this.ctx.fillText(label, 0, 0); - this.ctx.restore(); + context.translate(xLabelValue, yLabelValue + ticks.labelOffset); + context.rotate(labelRotationRadians * -1); + context.font = tickLabelFont; + context.textBaseline = "middle"; + context.fillText(label, 0, 0); + context.restore(); } }, this); - if (this.options.scaleLabel.display) { + if (scaleLabel.display) { // Draw the scale label scaleLabelX = this.options.position === 'left' ? this.left + (scaleLabelFontSize / 2) : this.right - (scaleLabelFontSize / 2); scaleLabelY = this.top + ((this.bottom - this.top) / 2); var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI; - this.ctx.save(); - this.ctx.translate(scaleLabelX, scaleLabelY); - this.ctx.rotate(rotation); - this.ctx.textAlign = "center"; - this.ctx.fillStyle =scaleLabelFontColor; // render in correct colour - this.ctx.font = scaleLabelFont; - this.ctx.textBaseline = 'middle'; - this.ctx.fillText(this.options.scaleLabel.labelString, 0, 0); - this.ctx.restore(); + context.save(); + context.translate(scaleLabelX, scaleLabelY); + context.rotate(rotation); + context.textAlign = "center"; + context.fillStyle =scaleLabelFontColor; // render in correct colour + context.font = scaleLabelFont; + context.textBaseline = 'middle'; + context.fillText(scaleLabel.labelString, 0, 0); + context.restore(); } } // Draw the line at the edge of the axis - this.ctx.lineWidth = this.options.gridLines.lineWidth; - this.ctx.strokeStyle = this.options.gridLines.color; + context.lineWidth = gridLines.lineWidth; + context.strokeStyle = gridLines.color; var x1 = this.left, x2 = this.right, y1 = this.top, y2 = this.bottom; + var aliasPixel = helpers.aliasPixel(context.lineWidth); if (this.isHorizontal()) { y1 = y2 = this.options.position === 'top' ? this.bottom : this.top; - y1 += helpers.aliasPixel(this.ctx.lineWidth); - y2 += helpers.aliasPixel(this.ctx.lineWidth); + y1 += aliasPixel; + y2 += aliasPixel; } else { x1 = x2 = this.options.position === 'left' ? this.right : this.left; - x1 += helpers.aliasPixel(this.ctx.lineWidth); - x2 += helpers.aliasPixel(this.ctx.lineWidth); + x1 += aliasPixel; + x2 += aliasPixel; } - this.ctx.beginPath(); - this.ctx.moveTo(x1, y1); - this.ctx.lineTo(x2, y2); - this.ctx.stroke(); + context.beginPath(); + context.moveTo(x1, y1); + context.lineTo(x2, y2); + context.stroke(); } } }); diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index be5f1c85b..38ec6eac9 100644 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -84,47 +84,50 @@ module.exports = function(Chart) { Chart.Tooltip = Chart.Element.extend({ initialize: function() { + var globalDefaults = Chart.defaults.global; var options = this._options; + var tooltips = options.tooltips; + helpers.extend(this, { _model: { // Positioning - xPadding: options.tooltips.xPadding, - yPadding: options.tooltips.yPadding, - xAlign : options.tooltips.yAlign, - yAlign : options.tooltips.xAlign, + xPadding: tooltips.xPadding, + yPadding: tooltips.yPadding, + xAlign : tooltips.yAlign, + yAlign : tooltips.xAlign, // Body - bodyColor: options.tooltips.bodyColor, - _bodyFontFamily: helpers.getValueOrDefault(options.tooltips.bodyFontFamily, Chart.defaults.global.defaultFontFamily), - _bodyFontStyle: helpers.getValueOrDefault(options.tooltips.bodyFontStyle, Chart.defaults.global.defaultFontStyle), - _bodyAlign: options.tooltips.bodyAlign, - bodyFontSize: helpers.getValueOrDefault(options.tooltips.bodyFontSize, Chart.defaults.global.defaultFontSize), - bodySpacing: options.tooltips.bodySpacing, + bodyColor: tooltips.bodyColor, + _bodyFontFamily: helpers.getValueOrDefault(tooltips.bodyFontFamily, globalDefaults.defaultFontFamily), + _bodyFontStyle: helpers.getValueOrDefault(tooltips.bodyFontStyle, globalDefaults.defaultFontStyle), + _bodyAlign: tooltips.bodyAlign, + bodyFontSize: helpers.getValueOrDefault(tooltips.bodyFontSize, globalDefaults.defaultFontSize), + bodySpacing: tooltips.bodySpacing, // Title - titleColor: options.tooltips.titleColor, - _titleFontFamily: helpers.getValueOrDefault(options.tooltips.titleFontFamily, Chart.defaults.global.defaultFontFamily), - _titleFontStyle: helpers.getValueOrDefault(options.tooltips.titleFontStyle, Chart.defaults.global.defaultFontStyle), - titleFontSize: helpers.getValueOrDefault(options.tooltips.titleFontSize, Chart.defaults.global.defaultFontSize), - _titleAlign: options.tooltips.titleAlign, - titleSpacing: options.tooltips.titleSpacing, - titleMarginBottom: options.tooltips.titleMarginBottom, + titleColor: tooltips.titleColor, + _titleFontFamily: helpers.getValueOrDefault(tooltips.titleFontFamily, globalDefaults.defaultFontFamily), + _titleFontStyle: helpers.getValueOrDefault(tooltips.titleFontStyle, globalDefaults.defaultFontStyle), + titleFontSize: helpers.getValueOrDefault(tooltips.titleFontSize, globalDefaults.defaultFontSize), + _titleAlign: tooltips.titleAlign, + titleSpacing: tooltips.titleSpacing, + titleMarginBottom: tooltips.titleMarginBottom, // Footer - footerColor: options.tooltips.footerColor, - _footerFontFamily: helpers.getValueOrDefault(options.tooltips.footerFontFamily, Chart.defaults.global.defaultFontFamily), - _footerFontStyle: helpers.getValueOrDefault(options.tooltips.footerFontStyle, Chart.defaults.global.defaultFontStyle), - footerFontSize: helpers.getValueOrDefault(options.tooltips.footerFontSize, Chart.defaults.global.defaultFontSize), - _footerAlign: options.tooltips.footerAlign, - footerSpacing: options.tooltips.footerSpacing, - footerMarginTop: options.tooltips.footerMarginTop, + footerColor: tooltips.footerColor, + _footerFontFamily: helpers.getValueOrDefault(tooltips.footerFontFamily, globalDefaults.defaultFontFamily), + _footerFontStyle: helpers.getValueOrDefault(tooltips.footerFontStyle, globalDefaults.defaultFontStyle), + footerFontSize: helpers.getValueOrDefault(tooltips.footerFontSize, globalDefaults.defaultFontSize), + _footerAlign: tooltips.footerAlign, + footerSpacing: tooltips.footerSpacing, + footerMarginTop: tooltips.footerMarginTop, // Appearance - caretSize: options.tooltips.caretSize, - cornerRadius: options.tooltips.cornerRadius, - backgroundColor: options.tooltips.backgroundColor, + caretSize: tooltips.caretSize, + cornerRadius: tooltips.cornerRadius, + backgroundColor: tooltips.backgroundColor, opacity: 0, - legendColorBackground: options.tooltips.multiKeyBackground + legendColorBackground: tooltips.multiKeyBackground } }); }, diff --git a/src/elements/element.line.js b/src/elements/element.line.js index b46ba6e68..997dec5e7 100644 --- a/src/elements/element.line.js +++ b/src/elements/element.line.js @@ -3,12 +3,13 @@ module.exports = function(Chart) { var helpers = Chart.helpers; + var globalDefaults = Chart.defaults.global; Chart.defaults.global.elements.line = { tension: 0.4, - backgroundColor: Chart.defaults.global.defaultColor, + backgroundColor: globalDefaults.defaultColor, borderWidth: 3, - borderColor: Chart.defaults.global.defaultColor, + borderColor: globalDefaults.defaultColor, borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, @@ -115,23 +116,24 @@ module.exports = function(Chart) { ctx.lineTo(this._children[0]._view.x, vm.scaleZero); } - ctx.fillStyle = vm.backgroundColor || Chart.defaults.global.defaultColor; + ctx.fillStyle = vm.backgroundColor || globalDefaults.defaultColor; ctx.closePath(); ctx.fill(); } + var globalOptionLineElements = globalDefaults.elements.line; // Now draw the line between all the points with any borders - ctx.lineCap = vm.borderCapStyle || Chart.defaults.global.elements.line.borderCapStyle; + ctx.lineCap = vm.borderCapStyle || globalOptionLineElements.borderCapStyle; // IE 9 and 10 do not support line dash if (ctx.setLineDash) { - ctx.setLineDash(vm.borderDash || Chart.defaults.global.elements.line.borderDash); + ctx.setLineDash(vm.borderDash || globalOptionLineElements.borderDash); } - ctx.lineDashOffset = vm.borderDashOffset || Chart.defaults.global.elements.line.borderDashOffset; - ctx.lineJoin = vm.borderJoinStyle || Chart.defaults.global.elements.line.borderJoinStyle; - ctx.lineWidth = vm.borderWidth || Chart.defaults.global.elements.line.borderWidth; - ctx.strokeStyle = vm.borderColor || Chart.defaults.global.defaultColor; + ctx.lineDashOffset = vm.borderDashOffset || globalOptionLineElements.borderDashOffset; + ctx.lineJoin = vm.borderJoinStyle || globalOptionLineElements.borderJoinStyle; + ctx.lineWidth = vm.borderWidth || globalOptionLineElements.borderWidth; + ctx.strokeStyle = vm.borderColor || globalDefaults.defaultColor; ctx.beginPath(); helpers.each(this._children, function(point, index) { diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index 11b9b2417..ef6d3b607 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -3,6 +3,7 @@ module.exports = function(Chart) { var helpers = Chart.helpers; + var globalDefaults = globalDefaults; var defaultConfig = { display: true, @@ -49,6 +50,7 @@ module.exports = function(Chart) { return this.chart.data.labels.length; }, setDimensions: function() { + var options = this.options; // Set the unconstrained dimension before label rotation this.width = this.maxWidth; this.height = this.maxHeight; @@ -56,8 +58,8 @@ module.exports = function(Chart) { this.yCenter = Math.round(this.height / 2); var minSize = helpers.min([this.height, this.width]); - var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize); - this.drawingArea = (this.options.display) ? (minSize / 2) - (tickFontSize / 2 + this.options.ticks.backdropPaddingY) : (minSize / 2); + var tickFontSize = helpers.getValueOrDefault(options.ticks.fontSize, globalDefaults.defaultFontSize); + this.drawingArea = (options.display) ? (minSize / 2) - (tickFontSize / 2 + options.ticks.backdropPaddingY) : (minSize / 2); }, determineDataLimits: function() { this.min = null; @@ -129,7 +131,7 @@ module.exports = function(Chart) { // the axis area. For now, we say that the minimum tick spacing in pixels must be 50 // We also limit the maximum number of ticks to 11 which gives a nice 10 squares on // the graph - var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize); + var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, globalDefaults.defaultFontSize); var maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.drawingArea / (1.5 * tickFontSize))); maxTicks = Math.max(2, maxTicks); // Make sure we always have at least 2 ticks @@ -206,9 +208,10 @@ module.exports = function(Chart) { * https://dl.dropboxusercontent.com/u/34601363/yeahscience.gif */ - var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize); - var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle); - var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily); + var pointLabels = this.options.pointLabels; + var pointLabelFontSize = helpers.getValueOrDefault(pointLabels.fontSize, globalDefaults.defaultFontSize); + var pointLabeFontStyle = helpers.getValueOrDefault(pointLabels.fontStyle, globalDefaults.defaultFontStyle); + var pointLabeFontFamily = helpers.getValueOrDefault(pointLabels.fontFamily, globalDefaults.defaultFontFamily); var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily); // Get maximum radius of the polygon. Either half the height (minus the text width) or half the width. @@ -355,10 +358,10 @@ module.exports = function(Chart) { } if (this.options.ticks.display) { - var tickFontColor = helpers.getValueOrDefault(this.options.ticks.fontColor, Chart.defaults.global.defaultFontColor); - var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize); - var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle); - var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily); + var tickFontColor = helpers.getValueOrDefault(this.options.ticks.fontColor, globalDefaults.defaultFontColor); + var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, globalDefaults.defaultFontSize); + var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, globalDefaults.defaultFontStyle); + var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, globalDefaults.defaultFontFamily); var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily); ctx.font = tickLabelFont; @@ -397,10 +400,10 @@ module.exports = function(Chart) { // Extra 3px out for some label spacing var pointLabelPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.options.reverse ? this.min : this.max) + 5); - var pointLabelFontColor = helpers.getValueOrDefault(this.options.pointLabels.fontColor, Chart.defaults.global.defaultFontColor); - var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize); - var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle); - var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily); + var pointLabelFontColor = helpers.getValueOrDefault(this.options.pointLabels.fontColor, globalDefaults.defaultFontColor); + var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, globalDefaults.defaultFontSize); + var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, globalDefaults.defaultFontStyle); + var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, globalDefaults.defaultFontFamily); var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily); ctx.font = pointLabeFont;