From: Ceane Lamerez Date: Tue, 17 May 2016 19:11:29 +0000 (+0200) Subject: Fix #2574 - Add support to hide border on the chart X-Git-Tag: v2.1.4~20 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=456ab9ca3672ea8784b240637e2047ec3730b57d;p=thirdparty%2FChart.js.git Fix #2574 - Add support to hide border on the chart --- diff --git a/docs/01-Scales.md b/docs/01-Scales.md index 19977e532..c7b2742bb 100644 --- a/docs/01-Scales.md +++ b/docs/01-Scales.md @@ -34,6 +34,7 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update *gridLines*.display | Boolean | true | *gridLines*.color | Color | "rgba(0, 0, 0, 0.1)" | Color of the grid lines. *gridLines*.lineWidth | Number | 1 | Stroke width of grid lines +*gridLines*.drawBorder | Boolean | true | If true draw border on the edge of the chart *gridLines*.drawOnChartArea | Boolean | true | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn *gridLines*.drawTicks | Boolean | true | If true, draw lines beside the ticks in the axis area beside the chart. *gridLines*.tickMarkLength | Number | 10 | Length in pixels that the grid lines will draw into the axis area. @@ -53,7 +54,7 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update *ticks*.fontFamily | String | "Helvetica Neue" | Font family for the tick labels, follows CSS font-family options. *ticks*.fontSize | Number | 12 | Font size for the tick labels. *ticks*.fontStyle | String | "normal" | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). -*ticks*.minRotation | Number | 0 | Minimum rotation for tick labels +*ticks*.minRotation | Number | 0 | Minimum rotation for tick labels *ticks*.maxRotation | Number | 90 | Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. *Note: Only applicable to horizontal scales.* *ticks*.minRotation | Number | 20 | *currently not-implemented* Minimum rotation for tick labels when condensing is necessary. *Note: Only applicable to horizontal scales.* *ticks*.maxTicksLimit | Number | 11 | Maximum number of ticks and gridlines to show. If not defined, it will limit to 11 ticks but will show all gridlines. @@ -64,7 +65,7 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update *ticks*.display | Boolean | true | If true, show the ticks. *ticks*.suggestedMin | Number | - | User defined minimum number for the scale, overrides minimum value *except for if* it is higher than the minimum value. *ticks*.suggestedMax | Number | - | User defined maximum number for the scale, overrides maximum value *except for if* it is lower than the maximum value. -*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value. +*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value. *ticks*.max | Number | - | User defined maximum number for the scale, overrides maximum value *ticks*.autoSkip | Boolean | true | If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what *ticks*.callback | Function | `function(value) { return '' + value; } ` | Returns the string representation of the tick value as it should be displayed on the chart. diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 24d3c1bfe..e53265ed5 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -13,6 +13,7 @@ module.exports = function(Chart) { display: true, color: "rgba(0, 0, 0, 0.1)", lineWidth: 1, + drawBorder: true, drawOnChartArea: true, drawTicks: true, tickMarkLength: 10, @@ -690,29 +691,31 @@ module.exports = function(Chart) { } } - // Draw the line at the edge of the axis - context.lineWidth = gridLines.lineWidth; - context.strokeStyle = gridLines.color; - var x1 = this.left, - x2 = this.right, - y1 = this.top, - y2 = this.bottom; + if (gridLines.drawBorder) { + // Draw the line at the edge of the axis + 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 = options.position === 'top' ? this.bottom : this.top; - y1 += aliasPixel; - y2 += aliasPixel; - } else { - x1 = x2 = options.position === 'left' ? this.right : this.left; - x1 += aliasPixel; - x2 += aliasPixel; - } + var aliasPixel = helpers.aliasPixel(context.lineWidth); + if (this.isHorizontal()) { + y1 = y2 = options.position === 'top' ? this.bottom : this.top; + y1 += aliasPixel; + y2 += aliasPixel; + } else { + x1 = x2 = options.position === 'left' ? this.right : this.left; + x1 += aliasPixel; + x2 += aliasPixel; + } - context.beginPath(); - context.moveTo(x1, y1); - context.lineTo(x2, y2); - context.stroke(); + context.beginPath(); + context.moveTo(x1, y1); + context.lineTo(x2, y2); + context.stroke(); + } } }); }; diff --git a/test/core.helpers.tests.js b/test/core.helpers.tests.js index 3815620e7..de06e294d 100644 --- a/test/core.helpers.tests.js +++ b/test/core.helpers.tests.js @@ -215,6 +215,7 @@ describe('Core helper tests', function() { gridLines: { color: "rgba(0, 0, 0, 0.1)", + drawBorder: true, drawOnChartArea: true, drawTicks: true, // draw ticks extending towards the label tickMarkLength: 10, @@ -248,6 +249,7 @@ describe('Core helper tests', function() { gridLines: { color: "rgba(0, 0, 0, 0.1)", + drawBorder: true, drawOnChartArea: true, drawTicks: true, // draw ticks extending towards the label, tickMarkLength: 10, diff --git a/test/scale.category.tests.js b/test/scale.category.tests.js index a58e89afd..c717b684f 100644 --- a/test/scale.category.tests.js +++ b/test/scale.category.tests.js @@ -14,6 +14,7 @@ describe('Category scale tests', function() { gridLines: { color: "rgba(0, 0, 0, 0.1)", + drawBorder: true, drawOnChartArea: true, drawTicks: true, // draw ticks extending towards the label tickMarkLength: 10, diff --git a/test/scale.linear.tests.js b/test/scale.linear.tests.js index 7e572dcdc..ba37d5ef5 100644 --- a/test/scale.linear.tests.js +++ b/test/scale.linear.tests.js @@ -25,6 +25,7 @@ describe('Linear Scale', function() { gridLines: { color: "rgba(0, 0, 0, 0.1)", + drawBorder: true, drawOnChartArea: true, drawTicks: true, // draw ticks extending towards the label tickMarkLength: 10, diff --git a/test/scale.logarithmic.tests.js b/test/scale.logarithmic.tests.js index 6c3724c7d..dc75480bb 100644 --- a/test/scale.logarithmic.tests.js +++ b/test/scale.logarithmic.tests.js @@ -20,6 +20,7 @@ describe('Logarithmic Scale tests', function() { display: true, gridLines: { color: "rgba(0, 0, 0, 0.1)", + drawBorder: true, drawOnChartArea: true, drawTicks: true, tickMarkLength: 10, diff --git a/test/scale.radialLinear.tests.js b/test/scale.radialLinear.tests.js index b1848c77f..d7b61695e 100644 --- a/test/scale.radialLinear.tests.js +++ b/test/scale.radialLinear.tests.js @@ -30,6 +30,7 @@ describe('Test the radial linear scale', function() { display: true, gridLines: { color: "rgba(0, 0, 0, 0.1)", + drawBorder: true, drawOnChartArea: true, drawTicks: true, tickMarkLength: 10, diff --git a/test/scale.time.tests.js b/test/scale.time.tests.js index 546d4564d..9966f9cc0 100644 --- a/test/scale.time.tests.js +++ b/test/scale.time.tests.js @@ -47,6 +47,7 @@ describe('Time scale tests', function() { display: true, gridLines: { color: "rgba(0, 0, 0, 0.1)", + drawBorder: true, drawOnChartArea: true, drawTicks: true, tickMarkLength: 10,