archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Allow turning off lines on a per dataset basis

Browse Source
This commit is contained in:
Evert Timberg 2016-05-27 22:20:51 -04:00
parent bcd17e5840
commit 327b8d82f5
3 changed files with 45 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/03-Line-Chart.md
View File

@ -57,6 +57,7 @@ pointHoverBackgroundColor | `Color or Array<Color>` | Point background color whe
pointHoverBorderColor | `Color or Array<Color>` | Point border color when hovered
pointHoverBorderWidth | `Number or Array<Number>` | Border width of point when hovered
pointStyle | `String, Array<String>, Image, Array<Image>` | 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

18
src/controllers/controller.line.js
View File

@ -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();
}

32
test/controller.line.tests.js
View File

@ -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',