Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-19 06:36:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor spanGaps for line graphs with sparse data (#2721)

Browse Source 
Fix #2435, this very slim patch (including its relevant documentation addition) adds a small option to line chart datasets (spanGaps) that allows users trying to graph sparse datasets to have lines between null entries drawn, rather than omitted.
This commit is contained in:
Ryan M. Poe
2016-06-07 03:15:26 -04:00
committed by Simon Brunel
parent 959b4eedf6
commit 77357e57d6
3 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -58,6 +58,7 @@ pointHoverBorderColor | `Color or Array<Color>` | Point border color when hovere
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
spanGaps | `Boolean` | If true, lines will be drawn between points with no or null data
An example data object using these attributes is shown below.
```javascript
@@ -84,6 +85,7 @@ var data = {
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
}
]
};
@@ -94,6 +96,8 @@ The data for line charts is broken up into an array of datasets. Each dataset ha
The label key on each dataset is optional, and can be used when generating a scale for the chart.
When `spanGaps` is set to true, the gaps between points in sparse datasets are filled in. By default, it is off.
### Data Points
The data passed to the chart can be passed in two formats. The most common method is to pass the data array as an array of numbers. In this case, the `data.labels` array must be specified and must contain a label for each point or, in the case of labels to be displayed over multiple lines an array of labels (one for each line) i.e `[["June","2015"], "July"]`.

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

@@ -75,6 +75,10 @@ module.exports = function(Chart) {
// Model
line._model = {
// Appearance
// The default behavior of lines is to break at null values, according
// to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158
// This option gives linse the ability to span gaps
spanGaps: dataset.spanGaps ? dataset.spanGaps : false,
tension: custom.tension ? custom.tension : helpers.getValueOrDefault(dataset.lineTension, lineElementOptions.tension),
backgroundColor: custom.backgroundColor ? custom.backgroundColor : (dataset.backgroundColor || lineElementOptions.backgroundColor),
borderWidth: custom.borderWidth ? custom.borderWidth : (dataset.borderWidth || lineElementOptions.borderWidth),

5
src/elements/element.line.js
View File

@@ -21,10 +21,11 @@ module.exports = function(Chart) {
lineToNextPoint: function(previousPoint, point, nextPoint, skipHandler, previousSkipHandler) {
var me = this;
var ctx = me._chart.ctx;
var spanGaps = me._view ? me._view.spanGaps : false;
if (point._view.skip) {
if (point._view.skip && !spanGaps) {
skipHandler.call(me, previousPoint, point, nextPoint);
} else if (previousPoint._view.skip) {
} else if (previousPoint._view.skip && !spanGaps) {
previousSkipHandler.call(me, previousPoint, point, nextPoint);
} else if (point._view.tension === 0) {
ctx.lineTo(point._view.x, point._view.y);