mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Add chart data property setter and unit tests
Chart data can now be entirely replaced using `chart.data = {...}` thanks to the new property setter (instead of using `chart.config.data = {}`). Also update the documentation, as suggested by @ldaguise and @kennethkalmer, with a note about versions prior 2.6.
This commit is contained in:
parent
85ee592b2a
commit
cc90c5c643
@ -25,7 +25,7 @@ myLineChart.destroy();
|
|||||||
|
|
||||||
#### .update(duration, lazy)
|
#### .update(duration, lazy)
|
||||||
|
|
||||||
Triggers an update of the chart. This can be safely called after replacing the entire data object. This will update all scales, legends, and then re-render the chart.
|
Triggers an update of the chart. This can be safely called after updating the data object. This will update all scales, legends, and then re-render the chart.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// duration is the time for the animation of the redraw in milliseconds
|
// duration is the time for the animation of the redraw in milliseconds
|
||||||
@ -34,6 +34,8 @@ myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's v
|
|||||||
myLineChart.update(); // Calling update now animates the position of March from 90 to 50.
|
myLineChart.update(); // Calling update now animates the position of March from 90 to 50.
|
||||||
```
|
```
|
||||||
|
|
||||||
|
> **Note:** replacing the data reference (e.g. `myLineChart.data = {datasets: [...]}` only works starting **version 2.6**. Prior that, replacing the entire data object could be achieved with the following workaround: `myLineChart.config.data = {datasets: [...]}`.
|
||||||
|
|
||||||
#### .reset()
|
#### .reset()
|
||||||
|
|
||||||
Reset the chart to it's state before the initial animation. A new animation can then be triggered using `update`.
|
Reset the chart to it's state before the initial animation. A new animation can then be triggered using `update`.
|
||||||
|
|||||||
@ -98,9 +98,13 @@ module.exports = function(Chart) {
|
|||||||
// Add the chart instance to the global namespace
|
// Add the chart instance to the global namespace
|
||||||
Chart.instances[me.id] = me;
|
Chart.instances[me.id] = me;
|
||||||
|
|
||||||
|
// Define alias to the config data: `chart.data === chart.config.data`
|
||||||
Object.defineProperty(me, 'data', {
|
Object.defineProperty(me, 'data', {
|
||||||
get: function() {
|
get: function() {
|
||||||
return me.config.data;
|
return me.config.data;
|
||||||
|
},
|
||||||
|
set: function(value) {
|
||||||
|
me.config.data = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -738,8 +738,8 @@ describe('Bar controller tests', function() {
|
|||||||
expect(meta.data[i]._model.base).toBeCloseToPixel(484);
|
expect(meta.data[i]._model.base).toBeCloseToPixel(484);
|
||||||
expect(meta.data[i]._model.width).toBeCloseToPixel(40);
|
expect(meta.data[i]._model.width).toBeCloseToPixel(40);
|
||||||
expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
|
expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
|
||||||
datasetLabel: chart.config.data.datasets[1].label,
|
datasetLabel: chart.data.datasets[1].label,
|
||||||
label: chart.config.data.labels[i],
|
label: chart.data.labels[i],
|
||||||
backgroundColor: 'red',
|
backgroundColor: 'red',
|
||||||
borderSkipped: 'top',
|
borderSkipped: 'top',
|
||||||
borderColor: 'blue',
|
borderColor: 'blue',
|
||||||
|
|||||||
@ -57,6 +57,25 @@ describe('Chart', function() {
|
|||||||
expect(chart.data.datasets[1].data).toBe(ds1.data);
|
expect(chart.data.datasets[1].data).toBe(ds1.data);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should define chart.data as an alias for config.data', function() {
|
||||||
|
var config = {data: {labels: [], datasets: []}};
|
||||||
|
var chart = acquireChart(config);
|
||||||
|
|
||||||
|
expect(chart.data).toBe(config.data);
|
||||||
|
|
||||||
|
chart.data = {labels: [1, 2, 3], datasets: [{data: [4, 5, 6]}]};
|
||||||
|
|
||||||
|
expect(config.data).toBe(chart.data);
|
||||||
|
expect(config.data.labels).toEqual([1, 2, 3]);
|
||||||
|
expect(config.data.datasets[0].data).toEqual([4, 5, 6]);
|
||||||
|
|
||||||
|
config.data = {labels: [7, 8, 9], datasets: [{data: [10, 11, 12]}]};
|
||||||
|
|
||||||
|
expect(chart.data).toBe(config.data);
|
||||||
|
expect(chart.data.labels).toEqual([7, 8, 9]);
|
||||||
|
expect(chart.data.datasets[0].data).toEqual([10, 11, 12]);
|
||||||
|
});
|
||||||
|
|
||||||
it('should initialize config with default options', function() {
|
it('should initialize config with default options', function() {
|
||||||
var callback = function() {};
|
var callback = function() {};
|
||||||
|
|
||||||
|
|||||||
@ -692,10 +692,10 @@ describe('Core.Tooltip', function() {
|
|||||||
expect(tooltip._view.dataPoints[0].index).toEqual(pointIndex);
|
expect(tooltip._view.dataPoints[0].index).toEqual(pointIndex);
|
||||||
expect(tooltip._view.dataPoints[0].datasetIndex).toEqual(datasetIndex);
|
expect(tooltip._view.dataPoints[0].datasetIndex).toEqual(datasetIndex);
|
||||||
expect(tooltip._view.dataPoints[0].xLabel).toEqual(
|
expect(tooltip._view.dataPoints[0].xLabel).toEqual(
|
||||||
chart.config.data.labels[pointIndex]
|
chart.data.labels[pointIndex]
|
||||||
);
|
);
|
||||||
expect(tooltip._view.dataPoints[0].yLabel).toEqual(
|
expect(tooltip._view.dataPoints[0].yLabel).toEqual(
|
||||||
chart.config.data.datasets[datasetIndex].data[pointIndex]
|
chart.data.datasets[datasetIndex].data[pointIndex]
|
||||||
);
|
);
|
||||||
expect(tooltip._view.dataPoints[0].x).toBeCloseToPixel(point._model.x);
|
expect(tooltip._view.dataPoints[0].x).toBeCloseToPixel(point._model.x);
|
||||||
expect(tooltip._view.dataPoints[0].y).toBeCloseToPixel(point._model.y);
|
expect(tooltip._view.dataPoints[0].y).toBeCloseToPixel(point._model.y);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user