Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 12:19:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add option to disable line drawing

Browse Source
This commit is contained in:
Mathias Küsel 2016-01-14 13:39:06 +01:00
parent ff94a54891
commit 24e4a924c4
3 changed files with 77 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -120,6 +120,7 @@ The default options for line chart are defined in `Chart.defaults.Line`.
Name | Type | Default | Description
--- | --- | --- | ---
showLines | Boolean | true | If false, the lines between points are not drawn
stacked | Boolean | false | If true, lines stack on top of each other along the y axis.
*hover*.mode | String | "label" | Label's hover mode. "label" is used since the x axis displays data by the index in the dataset.
scales | - | - | -

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

@ -7,6 +7,8 @@
helpers = Chart.helpers;
Chart.defaults.line = {
showLines: true,
hover: {
mode: "label"
},
@ -58,7 +60,8 @@
this.getDataset().metaData.splice(index, 0, point);
// Make sure bezier control points are updated
this.updateBezierControlPoints();
if (this.chart.options.showLines)
this.updateBezierControlPoints();
},
update: function update(reset) {
@ -78,38 +81,41 @@
}
// Update Line
helpers.extend(line, {
// Utility
_scale: yScale,
_datasetIndex: this.index,
// Data
_children: points,
// Model
_model: {
// Appearance
tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle),
borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash),
borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset),
borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle),
fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill),
// Scale
scaleTop: yScale.top,
scaleBottom: yScale.bottom,
scaleZero: scaleBase,
},
});
line.pivot();
if (this.chart.options.showLines) {
helpers.extend(line, {
// Utility
_scale: yScale,
_datasetIndex: this.index,
// Data
_children: points,
// Model
_model: {
// Appearance
tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle),
borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash),
borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset),
borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle),
fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill),
// Scale
scaleTop: yScale.top,
scaleBottom: yScale.bottom,
scaleZero: scaleBase,
},
});
line.pivot();
}
// Update Points
helpers.each(points, function(point, index) {
this.updateElement(point, index, reset);
}, this);
this.updateBezierControlPoints();
if (this.chart.options.showLines)
this.updateBezierControlPoints();
},
getPointBackgroundColor: function(point, index) {
@ -258,7 +264,8 @@
}, this);
// Transition and Draw the line
this.getDataset().metaDataset.transition(easingDecimal).draw();
if (this.chart.options.showLines)
this.getDataset().metaDataset.transition(easingDecimal).draw();
// Draw the points
helpers.each(this.getDataset().metaData, function(point) {

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

@ -87,6 +87,7 @@ describe('Line controller tests', function() {
type: 'line'
},
options: {
showLines: true,
scales: {
xAxes: [{
id: 'firstXScaleID'
@ -114,6 +115,45 @@ describe('Line controller tests', function() {
expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1);
});
it('should draw all elements except lines', function() {
var chart = {
data: {
datasets: [{
data: [10, 15, 0, -4]
}]
},
config: {
type: 'line'
},
options: {
showLines: false,
scales: {
xAxes: [{
id: 'firstXScaleID'
}],
yAxes: [{
id: 'firstYScaleID'
}]
}
}
};
var controller = new Chart.controllers.line(chart, 0);
spyOn(chart.data.datasets[0].metaDataset, 'draw');
spyOn(chart.data.datasets[0].metaData[0], 'draw');
spyOn(chart.data.datasets[0].metaData[1], 'draw');
spyOn(chart.data.datasets[0].metaData[2], 'draw');
spyOn(chart.data.datasets[0].metaData[3], 'draw');
controller.draw();
expect(chart.data.datasets[0].metaDataset.draw.calls.count()).toBe(0);
expect(chart.data.datasets[0].metaData[0].draw.calls.count()).toBe(1);
expect(chart.data.datasets[0].metaData[2].draw.calls.count()).toBe(1);
expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1);
});
it('should update elements', function() {
var data = {
datasets: [{
@ -177,6 +217,7 @@ describe('Line controller tests', function() {
type: 'line'
},
options: {
showLines: true,
elements: {
line: {
backgroundColor: 'rgb(255, 0, 0)',