From ca48caa8b02a017b07e6789574887c75bc8ed846 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Thu, 24 Sep 2015 02:25:21 -0600 Subject: [PATCH] checkpoint for the morning check MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit made some good progress. Just need some more eyes on it, cuz I’m literally typing without my glasses on right now. --- samples/combo-bar-line.html | 88 +++--- samples/line-scale-override.html | 131 -------- samples/line-x-axis-filter.html | 186 ++++++------ samples/scatter.html | 281 +++++++++--------- src/controllers/controller.bar.js | 27 +- src/controllers/controller.line.js | 4 +- src/core/core.controller.js | 10 + src/core/core.scale.js | 23 +- src/scales/scale.category.js | 6 +- src/scales/scale.linear.js | 462 +---------------------------- 10 files changed, 332 insertions(+), 886 deletions(-) delete mode 100644 samples/line-scale-override.html diff --git a/samples/combo-bar-line.html b/samples/combo-bar-line.html index cdca070c4..f2e936ab3 100644 --- a/samples/combo-bar-line.html +++ b/samples/combo-bar-line.html @@ -13,54 +13,56 @@ diff --git a/samples/line-scale-override.html b/samples/line-scale-override.html deleted file mode 100644 index 6603b5c04..000000000 --- a/samples/line-scale-override.html +++ /dev/null @@ -1,131 +0,0 @@ - - - - - Line Chart with Scale Override - - - - - -
- -
-
-
- - - - - - - - - diff --git a/samples/line-x-axis-filter.html b/samples/line-x-axis-filter.html index 71a1b8844..39a19ea3d 100644 --- a/samples/line-x-axis-filter.html +++ b/samples/line-x-axis-filter.html @@ -6,9 +6,9 @@ @@ -24,114 +24,114 @@ diff --git a/samples/scatter.html b/samples/scatter.html index fa9f08c0e..57f8e7645 100644 --- a/samples/scatter.html +++ b/samples/scatter.html @@ -15,150 +15,153 @@ diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index c9b80ddd4..bd2d5f0ee 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -16,8 +16,8 @@ type: "category", // Specific to Bar Controller - categoryPercentage: 0.75, - barPercentage: 0.5, + categoryPercentage: 0.8, + barPercentage: 0.9, // grid line settings gridLines: { @@ -160,8 +160,8 @@ // Desired view properties _model: { - x: this.calculateBarX(this.index, index), - y: reset ? yScalePoint : this.calculateBarY(this.index, index), + x: this.calculateBarX(index, this.index), + y: reset ? yScalePoint : this.calculateBarY(index, this.index), // Tooltip label: this.chart.data.labels[index], @@ -209,8 +209,8 @@ base = yScale.getPixelForValue(yScale.min); if (yScale.beginAtZero || ((yScale.min <= 0 && yScale.max >= 0) || (yScale.min >= 0 && yScale.max <= 0))) { - base = yScale.getPixelForValue(0); - base += yScale.options.gridLines.lineWidth; + base = yScale.getPixelForValue(0, 0); + //base += yScale.options.gridLines.lineWidth; } else if (yScale.min < 0 && yScale.max < 0) { // All values are negative. Use the top as the base base = yScale.getPixelForValue(yScale.max); @@ -225,9 +225,10 @@ var xScale = this.getScaleForID(this.getDataset().xAxisID); var yScale = this.getScaleForID(this.getDataset().yAxisID); - var datasetCount = this.chart.data.datasets.length; - var tickWidth = xScale.getSmallestDataDistance(); - console.log(tickWidth); + var datasetCount = !this.chart.isCombo ? this.chart.data.datasets.length : helpers.where(this.chart.data.datasets, function(ds) { + return ds.type == 'bar'; + }).length; + var tickWidth = xScale.getPixelForValue(null, 1) - xScale.getPixelForValue(null, 0); var categoryWidth = tickWidth * xScale.options.categoryPercentage; var categorySpacing = (tickWidth - (tickWidth * xScale.options.categoryPercentage)) / 2; var fullBarWidth = categoryWidth / datasetCount; @@ -259,16 +260,16 @@ }, - calculateBarX: function(datasetIndex, elementIndex) { + calculateBarX: function(index, datasetIndex) { var yScale = this.getScaleForID(this.getDataset().yAxisID); var xScale = this.getScaleForID(this.getDataset().xAxisID); - var leftTick = xScale.getPixelFromTickIndex(elementIndex); + var leftTick = xScale.getPixelForValue(null, index); var ruler = this.getRuler(); if (yScale.options.stacked) { - return ruler.leftTick + (ruler.categoryWidth / 2) + ruler.categorySpacing; + return leftTick + (ruler.categoryWidth / 2) + ruler.categorySpacing; } return leftTick + @@ -279,7 +280,7 @@ (ruler.barSpacing * datasetIndex); }, - calculateBarY: function(datasetIndex, index) { + calculateBarY: function(index, datasetIndex) { var xScale = this.getScaleForID(this.getDataset().xAxisID); var yScale = this.getScaleForID(this.getDataset().yAxisID); diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index c56e2e2ac..f5e5640f8 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -116,7 +116,7 @@ // Make sure that we handle number of datapoints changing if (numData < numPoints) { // Remove excess bars for data points that have been removed - this.getDataset().metaData.splice(numData, numPoints - numData) + this.getDataset().metaData.splice(numData, numPoints - numData); } else if (numData > numPoints) { // Add new elements for (var index = numPoints; index < numData; ++index) { @@ -192,7 +192,7 @@ // Desired view properties _model: { - x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index), + x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo), y: reset ? scaleBase : yScale.getPixelForValue(this.getDataset().data[index], index, this.index), // Appearance tension: point.custom && point.custom.tension ? point.custom.tension : (this.getDataset().tension || this.chart.options.elements.line.tension), diff --git a/src/core/core.controller.js b/src/core/core.controller.js index b87dc5121..26db1cd10 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -209,14 +209,24 @@ }, buildOrUpdateControllers: function() { + var types = []; helpers.each(this.data.datasets, function(dataset, datasetIndex) { var type = dataset.type || this.config.type; + types.push(type); if (dataset.controller) { dataset.controller.updateIndex(datasetIndex); return; } dataset.controller = new Chart.controllers[type](this, datasetIndex); }, this); + if (types.length > 1) { + for (var i = 1; i < types.length; i++) { + if (types[i] != types[i - 1]) { + this.isCombo = true; + break; + } + } + } }, resetElements: function resetElements() { diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 96b96c376..3071d613d 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -46,11 +46,6 @@ this.beforeUpdate(); // Absorb the master measurements - if (!this.isHorizontal()) { - console.log(maxWidth); - } - - this.maxWidth = maxWidth; this.maxHeight = maxHeight; this.margins = margins; @@ -132,6 +127,7 @@ //Max label rotation can be set or default to 90 - also act as a loop counter while (this.labelWidth > tickWidth && this.labelRotation <= this.options.ticks.maxRotation) { + console.log(this.labelWidth, tickWidth, ',', this.labelRotation, this.options.ticks.maxRotation); cosRotation = Math.cos(helpers.toRadians(this.labelRotation)); sinRotation = Math.sin(helpers.toRadians(this.labelRotation)); @@ -145,6 +141,7 @@ this.paddingRight = this.options.ticks.fontSize / 2; + console.log(sinRotation * originalLabelWidth, this.maxHeight); if (sinRotation * originalLabelWidth > this.maxHeight) { // go back one step this.labelRotation--; @@ -152,7 +149,6 @@ } this.labelRotation++; - this.labelRotation = Math.max(this.labelRotation, this.options.ticks.minRotation); this.labelWidth = cosRotation * originalLabelWidth; } @@ -233,7 +229,6 @@ // Expand to max size this.minSize.width = this.maxWidth; } - this.minSize.width += 6; // extra padding this.paddingTop = this.options.ticks.fontSize / 2; this.paddingBottom = this.options.ticks.fontSize / 2; @@ -283,7 +278,8 @@ } return this.left + Math.round(pixel); } else { - return this.top + (index * (this.height / this.ticks.length)); + var innerHeight = this.height - (this.paddingTop + this.paddingBottom); + return this.top + (index * (innerHeight / (this.ticks.length - 1))); } }, @@ -331,7 +327,7 @@ var xLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option) if (this.options.gridLines.show) { - if (index === 0) { + 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; @@ -391,9 +387,10 @@ // } var yLineValue = this.getPixelForTick(index); // xvalues for grid lines var yLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option) + var xLabelValue = this.left + (this.width / 2); if (this.options.gridLines.show) { - if (index === 0) { + 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; @@ -426,11 +423,11 @@ if (this.options.ticks.show) { this.ctx.save(); - this.ctx.translate(this.left + (isRotated ? 10 : 5) + 3, yLabelValue - (this.options.ticks.fontSize / 2) + (isRotated ? this.options.ticks.fontSize / 1.5 : 0)); + this.ctx.translate(xLabelValue, yLabelValue); this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1); this.ctx.font = this.font; - this.ctx.textAlign = (isRotated) ? "right" : "center"; - this.ctx.textBaseline = (isRotated) ? "middle" : "top"; + this.ctx.textAlign = 'center'; + this.ctx.textBaseline = "middle"; this.ctx.fillText(label, 0, 0); this.ctx.restore(); } diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js index 52334ee80..ea51cfd14 100644 --- a/src/scales/scale.category.js +++ b/src/scales/scale.category.js @@ -17,13 +17,11 @@ // Used to get data value locations. Value can either be an index or a numerical value getPixelForValue: function(value, index, datasetIndex, includeOffset) { + if (this.isHorizontal()) { var innerWidth = this.width - (this.paddingLeft + this.paddingRight); var valueWidth = innerWidth / Math.max((this.data.labels.length - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1); - var toZero = this.max - this.min; - var newVal = value - toZero; - var decimal = newVal / (this.max - toZero); - var valueOffset = (valueWidth * decimal) + this.paddingLeft; + var valueOffset = (valueWidth * index) + this.paddingLeft; if (this.options.gridLines.offsetGridLines && includeOffset) { valueOffset += (valueWidth / 2); diff --git a/src/scales/scale.linear.js b/src/scales/scale.linear.js index 4c2a11514..662c69e60 100644 --- a/src/scales/scale.linear.js +++ b/src/scales/scale.linear.js @@ -74,24 +74,8 @@ } - - // We need to decide how many ticks we are going to have. Each tick draws a grid line. - // There are two possibilities. The first is that the user has manually overridden the scale - // calculations in which case the job is easy. The other case is that we have to do it ourselves - // - // We assume at this point that the scale object has been updated with the following values - // by the chart. - // - // min: this is the minimum value of the scale - // max: this is the maximum value of the scale - // options: contains the options for the scale. This is referenced from the user settings - // rather than being cloned. This ensures that updates always propogate to a redraw - - // Reset the ticks array. Later on, we will draw a grid line at these positions - // The array simply contains the numerical value of the spots where ticks will be + // Then calulate the ticks this.ticks = []; - this.min = this.maxWidth; - this.max = this.maxHeight; // Figure out what the max number of ticks we can support it is based on the size of // the axis area. For now, we say that the minimum tick spacing in pixels must be 50 @@ -156,18 +140,17 @@ this.start = this.max; this.end = this.min; } else { - this.start = this.min; - this.end = this.max; + this.start = this.max; + this.end = this.min; } + + this.zeroLineIndex = this.ticks.indexOf(0); }, // Utils - // Get the correct value. If the value type is object get the x or y based on whether we are horizontal or not - getRightValue: function(rawValue) { - return (typeof(rawValue) === "object" && rawValue !== null) ? (this.isHorizontal() ? rawValue.x : rawValue.y) : rawValue; - }, + getPixelForValue: function(value, index, datasetIndex, includeOffset) { // This must be called after fit has been run so that // this.left, this.top, this.right, and this.bottom have been defined @@ -176,437 +159,20 @@ if (this.isHorizontal()) { var innerWidth = this.width - (this.paddingLeft + this.paddingRight); - pixel = this.left + (innerWidth / range * (value - this.start)); - pixel += this.paddingLeft; + pixel = this.left + (innerWidth / range * (this.getRightValue(value) - this.start)); + return Math.round(pixel + this.paddingLeft); } else { - // Bottom - top since pixels increase downard on a screen var innerHeight = this.height - (this.paddingTop + this.paddingBottom); - pixel = (this.bottom - this.paddingBottom) - (innerHeight / range * (value - this.start)); + pixel = this.top + (innerHeight / range * (this.getRightValue(value) - this.start)); + return Math.round(pixel + this.paddingTop); } - - return pixel; }, - // Functions needed for line charts - // calculateRange: function() { - // this.min = null; - // this.max = null; - - // var positiveValues = []; - // var negativeValues = []; - - // if (this.options.stacked) { - // helpers.each(this.data.datasets, function(dataset) { - // if (this.isHorizontal() ? dataset.xAxisID === this.id : dataset.yAxisID === this.id) { - // helpers.each(dataset.data, function(rawValue, index) { - - // var value = this.getRightValue(rawValue); - - // positiveValues[index] = positiveValues[index] || 0; - // negativeValues[index] = negativeValues[index] || 0; - - // if (this.options.relativePoints) { - // positiveValues[index] = 100; - // } else { - // if (value < 0) { - // negativeValues[index] += value; - // } else { - // positiveValues[index] += value; - // } - // } - // }, this); - // } - // }, this); - - // var values = positiveValues.concat(negativeValues); - // this.min = helpers.min(values); - // this.max = helpers.max(values); - - // } else { - // helpers.each(this.data.datasets, function(dataset) { - // if (this.isHorizontal() ? dataset.xAxisID === this.id : dataset.yAxisID === this.id) { - // helpers.each(dataset.data, function(rawValue, index) { - // var value = this.getRightValue(rawValue); - - // if (this.min === null) { - // this.min = value; - // } else if (value < this.min) { - // this.min = value; - // } - - // if (this.max === null) { - // this.max = value; - // } else if (value > this.max) { - // this.max = value; - // } - // }, this); - // } - // }, this); - // } - - // if (this.min === this.max) { - // this.min--; - // this.max++; - // } - // }, - - // getPointPixelForValue: function(rawValue, index, datasetIndex) { - // var value = this.getRightValue(rawValue); - - // if (this.options.stacked) { - // var offsetPos = 0; - // var offsetNeg = 0; - - // for (var i = this.data.datasets.length - 1; i > datasetIndex; --i) { - // if (this.data.datasets[i].data[index] < 0) { - // offsetNeg += this.data.datasets[i].data[index]; - // } else { - // offsetPos += this.data.datasets[i].data[index]; - // } - // } - - // if (value < 0) { - // return this.getPixelForValue(offsetNeg + value); - // } else { - // return this.getPixelForValue(offsetPos + value); - // } - // } else { - // return this.getPixelForValue(value); - // } - // }, - - // Functions needed for bar charts - // calculateBarBase: function(datasetIndex, index) { - // var base = 0; - - // if (this.options.stacked) { - - // var value = this.data.datasets[datasetIndex].data[index]; - - // if (value < 0) { - // for (var i = 0; i < datasetIndex; i++) { - // if (this.data.datasets[i].yAxisID === this.id) { - // base += this.data.datasets[i].data[index] < 0 ? this.data.datasets[i].data[index] : 0; - // } - // } - // } else { - // for (var j = 0; j < datasetIndex; j++) { - // if (this.data.datasets[j].yAxisID === this.id) { - // base += this.data.datasets[j].data[index] > 0 ? this.data.datasets[j].data[index] : 0; - // } - // } - // } - - // return this.getPixelForValue(base); - // } - - // base = this.getPixelForValue(this.min); - - // if (this.beginAtZero || ((this.min <= 0 && this.max >= 0) || (this.min >= 0 && this.max <= 0))) { - // base = this.getPixelForValue(0); - // base += this.options.gridLines.lineWidth; - // } else if (this.min < 0 && this.max < 0) { - // // All values are negative. Use the top as the base - // base = this.getPixelForValue(this.max); - // } - - // return base; - - // }, - // calculateBarY: function(datasetIndex, index) { - // var value = this.data.datasets[datasetIndex].data[index]; - - // if (this.options.stacked) { - - // var sumPos = 0, - // sumNeg = 0; - - // for (var i = 0; i < datasetIndex; i++) { - // if (this.data.datasets[i].data[index] < 0) { - // sumNeg += this.data.datasets[i].data[index] || 0; - // } else { - // sumPos += this.data.datasets[i].data[index] || 0; - // } - // } - - // if (value < 0) { - // return this.getPixelForValue(sumNeg + value); - // } else { - // return this.getPixelForValue(sumPos + value); - // } - - // return this.getPixelForValue(value); - // } - - // return this.getPixelForValue(value); - // }, - - // Fit this axis to the given size - // @param {number} maxWidth : the max width the axis can be - // @param {number} maxHeight: the max height the axis can be - // @return {object} minSize : the minimum size needed to draw the axis - /*fit: function() { - - this.minSize = { - width: 0, - height: 0, - }; - - // In a horizontal axis, we need some room for the scale to be drawn - // - // ----------------------------------------------------- - // | | | | | - // - // In a vertical axis, we need some room for the scale to be drawn. - // The actual grid lines will be drawn on the chart area, however, we need to show - // ticks where the axis actually is. - // We will allocate 25px for this width - // | - // -| - // | - // | - // -| - // | - // | - // -| - - - // Width - if (this.isHorizontal()) { - this.minSize.width = this.maxWidth; // fill all the width - } else { - this.minSize.width = this.options.gridLines.show && this.options.display ? 10 : 0; - } - - // height - if (this.isHorizontal()) { - this.minSize.height = this.options.gridLines.show && this.options.display ? 10 : 0; - } else { - this.minSize.height = this.maxHeight; // fill all the height - } - - this.paddingLeft = 0; - this.paddingRight = 0; - this.paddingTop = 0; - this.paddingBottom = 0; - - - if (this.options.ticks.show && this.options.display) { - // Don't bother fitting the ticks if we are not showing them - var labelFont = helpers.fontString(this.options.ticks.fontSize, - this.options.ticks.fontStyle, this.options.ticks.fontFamily); - - if (this.isHorizontal()) { - // A horizontal axis is more constrained by the height. - var maxLabelHeight = this.maxHeight - this.minSize.height; - var labelHeight = 1.5 * this.options.ticks.fontSize; - this.minSize.height = Math.min(this.maxHeight, this.minSize.height + labelHeight); - - var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily); - this.ctx.font = labelFont; - - var firstLabelWidth = this.ctx.measureText(this.ticks[0]).width; - var lastLabelWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width; - - // Ensure that our ticks are always inside the canvas - this.paddingLeft = firstLabelWidth / 2; - this.paddingRight = lastLabelWidth / 2; - } else { - // A vertical axis is more constrained by the width. Labels are the dominant factor - // here, so get that length first - var maxLabelWidth = this.maxWidth - this.minSize.width; - var largestTextWidth = helpers.longestText(this.ctx, labelFont, this.ticks); - - if (largestTextWidth < maxLabelWidth) { - // We don't need all the room - this.minSize.width += largestTextWidth; - this.minSize.width += 3; // extra padding - } else { - // Expand to max size - this.minSize.width = this.maxWidth; - } - - this.paddingTop = this.options.ticks.fontSize / 2; - this.paddingBottom = this.options.ticks.fontSize / 2; - } - } - - if (this.margins) { - this.paddingLeft -= this.margins.left; - this.paddingTop -= this.margins.top; - this.paddingRight -= this.margins.right; - this.paddingBottom -= this.margins.bottom; - - this.paddingLeft = Math.max(this.paddingLeft, 0); - this.paddingTop = Math.max(this.paddingTop, 0); - this.paddingRight = Math.max(this.paddingRight, 0); - this.paddingBottom = Math.max(this.paddingBottom, 0); - } - - this.width = this.minSize.width; - this.height = this.minSize.height; - },*/ - // Actualy draw the scale on the canvas - // @param {rectangle} chartArea : the area of the chart to draw full grid lines on - _draw: function(chartArea) { - if (this.options.display) { - - var setContextLineSettings; - var hasZero; - - // Make sure we draw text in the correct color - this.ctx.fillStyle = this.options.ticks.fontColor; - - if (this.isHorizontal()) { - if (this.options.gridLines.show) { - // Draw the horizontal line - setContextLineSettings = true; - hasZero = helpers.findNextWhere(this.ticks, function(tick) { - return tick === 0; - }) !== undefined; - var yTickStart = this.options.position == "bottom" ? this.top : this.bottom - 5; - var yTickEnd = this.options.position == "bottom" ? this.top + 5 : this.bottom; - - helpers.each(this.ticks, function(tick, index) { - // Grid lines are vertical - var xValue = this.getPixelForValue(tick); - - if (tick === 0 || (!hasZero && index === 0)) { - // Draw the 0 point specially or the left if there is no 0 - this.ctx.lineWidth = this.options.gridLines.zeroLineWidth; - this.ctx.strokeStyle = this.options.gridLines.zeroLineColor; - setContextLineSettings = true; // reset next time - } else if (setContextLineSettings) { - this.ctx.lineWidth = this.options.gridLines.lineWidth; - this.ctx.strokeStyle = this.options.gridLines.color; - setContextLineSettings = false; - } - - xValue += helpers.aliasPixel(this.ctx.lineWidth); - - // Draw the label area - this.ctx.beginPath(); - - if (this.options.gridLines.drawTicks) { - this.ctx.moveTo(xValue, yTickStart); - this.ctx.lineTo(xValue, yTickEnd); - } - - // Draw the chart area - if (this.options.gridLines.drawOnChartArea) { - this.ctx.moveTo(xValue, chartArea.top); - this.ctx.lineTo(xValue, chartArea.bottom); - } - - // Need to stroke in the loop because we are potentially changing line widths & colours - this.ctx.stroke(); - }, this); - } - - if (this.options.ticks.show) { - // Draw the ticks - - var labelStartY; - - if (this.options.position == "top") { - labelStartY = this.bottom - 10; - this.ctx.textBaseline = "bottom"; - } else { - // bottom side - labelStartY = this.top + 10; - this.ctx.textBaseline = "top"; - } - - this.ctx.textAlign = "center"; - this.ctx.font = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily); - - helpers.each(this.ticks, function(label, index) { - var xValue = this.getPixelForValue(this.ticks[index]); - this.ctx.fillText(label, xValue, labelStartY); - }, this); - } - } else { - // Vertical - if (this.options.gridLines.show) { - - // Draw the vertical line - setContextLineSettings = true; - hasZero = helpers.findNextWhere(this.ticks, function(tick) { - return tick === 0; - }) !== undefined; - var xTickStart = this.options.position == "right" ? this.left : this.right - 5; - var xTickEnd = this.options.position == "right" ? this.left + 5 : this.right; - - helpers.each(this.ticks, function(tick, index) { - // Grid lines are horizontal - var yValue = this.getPixelForValue(tick); - - if (tick === 0 || (!hasZero && index === 0)) { - // Draw the 0 point specially or the bottom if there is no 0 - this.ctx.lineWidth = this.options.gridLines.zeroLineWidth; - this.ctx.strokeStyle = this.options.gridLines.zeroLineColor; - setContextLineSettings = true; // reset next time - } else if (setContextLineSettings) { - this.ctx.lineWidth = this.options.gridLines.lineWidth; - this.ctx.strokeStyle = this.options.gridLines.color; - setContextLineSettings = false; // use boolean to indicate that we only want to do this once - } - - yValue += helpers.aliasPixel(this.ctx.lineWidth); - - // Draw the label area - this.ctx.beginPath(); - - if (this.options.gridLines.drawTicks) { - this.ctx.moveTo(xTickStart, yValue); - this.ctx.lineTo(xTickEnd, yValue); - } - - // Draw the chart area - if (this.options.gridLines.drawOnChartArea) { - this.ctx.moveTo(chartArea.left, yValue); - this.ctx.lineTo(chartArea.right, yValue); - } - - this.ctx.stroke(); - }, this); - } - - if (this.options.ticks.show) { - // Draw the ticks - - var labelStartX; - - if (this.options.position == "left") { - if (this.options.ticks.mirror) { - labelStartX = this.right + this.options.ticks.padding; - this.ctx.textAlign = "left"; - } else { - labelStartX = this.right - this.options.ticks.padding; - this.ctx.textAlign = "right"; - } - } else { - // right side - if (this.options.ticks.mirror) { - labelStartX = this.left - this.options.ticks.padding; - this.ctx.textAlign = "right"; - } else { - labelStartX = this.left + this.options.ticks.padding; - this.ctx.textAlign = "left"; - } - } - - this.ctx.textBaseline = "middle"; - this.ctx.font = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily); + // Get the correct value. If the value type is object get the x or y based on whether we are horizontal or not + getRightValue: function(rawValue) { + return (typeof(rawValue) === "object" && rawValue !== null) ? (this.isHorizontal() ? rawValue.x : rawValue.y) : rawValue; + }, - helpers.each(this.ticks, function(label, index) { - var yValue = this.getPixelForValue(this.ticks[index]); - this.ctx.fillText(label, labelStartX, yValue); - }, this); - } - } - } - } }); Chart.scaleService.registerScaleType("linear", LinearScale, defaultConfig); -- 2.47.3