From: Evert Timberg Date: Sat, 28 May 2016 02:20:51 +0000 (-0400) Subject: Allow turning off lines on a per dataset basis X-Git-Tag: v2.1.5~32^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F2658%2Fhead;p=thirdparty%2FChart.js.git Allow turning off lines on a per dataset basis --- diff --git a/docs/03-Line-Chart.md b/docs/03-Line-Chart.md index d15de299a..45b95d231 100644 --- a/docs/03-Line-Chart.md +++ b/docs/03-Line-Chart.md @@ -57,6 +57,7 @@ pointHoverBackgroundColor | `Color or Array` | Point background color whe pointHoverBorderColor | `Color or Array` | Point border color when hovered pointHoverBorderWidth | `Number or Array` | Border width of point when hovered pointStyle | `String, Array, Image, Array` | The style of point. Options are 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using `drawImage`. +showLine | `Boolean` | If false, the line is not drawn for this dataset An example data object using these attributes is shown below. ```javascript diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index ef3f2b65d..48cae30a9 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -23,6 +23,10 @@ module.exports = function(Chart) { } }; + function lineEnabled(dataset, options) { + return helpers.getValueOrDefault(dataset.showLine, options.showLines); + } + Chart.controllers.line = Chart.DatasetController.extend({ datasetElementType: Chart.elements.Line, @@ -37,7 +41,7 @@ module.exports = function(Chart) { Chart.DatasetController.prototype.addElementAndReset.call(me, index); // Make sure bezier control points are updated - if (options.showLines && meta.dataset._model.tension !== 0) { + if (lineEnabled(me.getDataset(), options) && meta.dataset._model.tension !== 0) { me.updateBezierControlPoints(); } }, @@ -50,11 +54,12 @@ module.exports = function(Chart) { var options = me.chart.options; var lineElementOptions = options.elements.line; var scale = me.getScaleForId(meta.yAxisID); - var i, ilen, dataset, custom; + var i, ilen, custom; + var dataset = me.getDataset(); + var showLine = lineEnabled(dataset, options); // Update Line - if (options.showLines) { - dataset = me.getDataset(); + if (showLine) { custom = line.custom || {}; // Compatibility: If the properties are defined with only the old name, use those values @@ -93,7 +98,7 @@ module.exports = function(Chart) { me.updateElement(points[i], i, reset); } - if (options.showLines && line._model.tension !== 0) { + if (showLine && line._model.tension !== 0) { me.updateBezierControlPoints(); } @@ -254,6 +259,7 @@ module.exports = function(Chart) { }, draw: function(ease) { + var me = this; var meta = this.getMeta(); var points = meta.data || []; var easingDecimal = ease || 1; @@ -265,7 +271,7 @@ module.exports = function(Chart) { } // Transition and Draw the line - if (this.chart.options.showLines) { + if (lineEnabled(me.getDataset(), me.chart.options)) { meta.dataset.transition(easingDecimal).draw(); } diff --git a/test/controller.line.tests.js b/test/controller.line.tests.js index 6172f444f..782cf8f43 100644 --- a/test/controller.line.tests.js +++ b/test/controller.line.tests.js @@ -138,6 +138,38 @@ describe('Line controller tests', function() { expect(meta.data[3].draw.calls.count()).toBe(1); }); + it('should draw all elements except lines turned off per dataset', function() { + var chart = window.acquireChart({ + type: 'line', + data: { + datasets: [{ + data: [10, 15, 0, -4], + label: 'dataset1', + showLine: false + }], + labels: ['label1', 'label2', 'label3', 'label4'] + }, + options: { + showLines: true + } + }); + + var meta = chart.getDatasetMeta(0); + spyOn(meta.dataset, 'draw'); + spyOn(meta.data[0], 'draw'); + spyOn(meta.data[1], 'draw'); + spyOn(meta.data[2], 'draw'); + spyOn(meta.data[3], 'draw'); + + chart.update(); + + expect(meta.dataset.draw.calls.count()).toBe(0); + expect(meta.data[0].draw.calls.count()).toBe(1); + expect(meta.data[1].draw.calls.count()).toBe(1); + expect(meta.data[2].draw.calls.count()).toBe(1); + expect(meta.data[3].draw.calls.count()).toBe(1); + }); + it('should update elements when modifying data', function() { var chart = window.acquireChart({ type: 'line',