mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 04:09:08 +02:00
Add ability to hide specific data element (#9450)
This commit is contained in:
parent
151188e2f2
commit
cf951ac611
@ -152,20 +152,26 @@ Returns the stored visibility state of an data index for all datasets. Set by [t
|
||||
var visible = chart.getDataVisibility(2);
|
||||
```
|
||||
|
||||
## hide(datasetIndex)
|
||||
## hide(datasetIndex, dataIndex?)
|
||||
|
||||
Sets the visibility for the given dataset to false. Updates the chart and animates the dataset with `'hide'` mode. This animation can be configured under the `hide` key in animation options. Please see [animations](../configuration/animations.md) docs for more details.
|
||||
If dataIndex is not specified, sets the visibility for the given dataset to false. Updates the chart and animates the dataset with `'hide'` mode. This animation can be configured under the `hide` key in animation options. Please see [animations](../configuration/animations.md) docs for more details.
|
||||
|
||||
If dataIndex is specified, sets the hidden flag of that element to true and updates the chart.
|
||||
|
||||
```javascript
|
||||
chart.hide(1); // hides dataset at index 1 and does 'hide' animation.
|
||||
chart.hide(0, 2); // hides the data element at index 2 of the first dataset.
|
||||
```
|
||||
|
||||
## show(datasetIndex)
|
||||
## show(datasetIndex, dataIndex?)
|
||||
|
||||
Sets the visibility for the given dataset to true. Updates the chart and animates the dataset with `'show'` mode. This animation can be configured under the `show` key in animation options. Please see [animations](../configuration/animations.md) docs for more details.
|
||||
If dataIndex is not specified, sets the visibility for the given dataset to true. Updates the chart and animates the dataset with `'show'` mode. This animation can be configured under the `show` key in animation options. Please see [animations](../configuration/animations.md) docs for more details.
|
||||
|
||||
If dataIndex is specified, sets the hidden flag of that element to false and updates the chart.
|
||||
|
||||
```javascript
|
||||
chart.show(1); // shows dataset at index 1 and does 'show' animation.
|
||||
chart.show(0, 2); // shows the data element at index 2 of the first dataset.
|
||||
```
|
||||
|
||||
## setActiveElements(activeElements)
|
||||
|
@ -48,6 +48,30 @@ const actions = [
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Hide(0)',
|
||||
handler(chart) {
|
||||
chart.hide(0);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Show(0)',
|
||||
handler(chart) {
|
||||
chart.show(0);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Hide (0, 1)',
|
||||
handler(chart) {
|
||||
chart.hide(0, 1);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Show (0, 1)',
|
||||
handler(chart) {
|
||||
chart.show(0, 1);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Remove Dataset',
|
||||
handler(chart) {
|
||||
|
@ -145,7 +145,7 @@ export default class DoughnutController extends DatasetController {
|
||||
const opts = me.options;
|
||||
const meta = me._cachedMeta;
|
||||
const circumference = me._getCircumference();
|
||||
if ((reset && opts.animation.animateRotate) || !this.chart.getDataVisibility(i) || meta._parsed[i] === null) {
|
||||
if ((reset && opts.animation.animateRotate) || !this.chart.getDataVisibility(i) || meta._parsed[i] === null || meta.data[i].hidden) {
|
||||
return 0;
|
||||
}
|
||||
return me.calculateCircumference(meta._parsed[i] * circumference / TAU);
|
||||
@ -203,7 +203,7 @@ export default class DoughnutController extends DatasetController {
|
||||
|
||||
for (i = 0; i < metaData.length; i++) {
|
||||
const value = meta._parsed[i];
|
||||
if (value !== null && !isNaN(value) && this.chart.getDataVisibility(i)) {
|
||||
if (value !== null && !isNaN(value) && this.chart.getDataVisibility(i) && !metaData[i].hidden) {
|
||||
total += Math.abs(value);
|
||||
}
|
||||
}
|
||||
|
@ -7,7 +7,7 @@ import PluginService from './core.plugins';
|
||||
import registry from './core.registry';
|
||||
import Config, {determineAxis, getIndexAxis} from './core.config';
|
||||
import {retinaScale, _isDomSupported} from '../helpers/helpers.dom';
|
||||
import {each, callback as callCallback, uid, valueOrDefault, _elementsEqual, isNullOrUndef, setsEqual} from '../helpers/helpers.core';
|
||||
import {each, callback as callCallback, uid, valueOrDefault, _elementsEqual, isNullOrUndef, setsEqual, defined} from '../helpers/helpers.core';
|
||||
import {clearCanvas, clipArea, unclipArea, _isPointInArea} from '../helpers/helpers.canvas';
|
||||
// @ts-ignore
|
||||
import {version} from '../../package.json';
|
||||
@ -794,25 +794,29 @@ class Chart {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_updateDatasetVisibility(datasetIndex, visible) {
|
||||
_updateVisibility(datasetIndex, dataIndex, visible) {
|
||||
const me = this;
|
||||
const mode = visible ? 'show' : 'hide';
|
||||
const meta = me.getDatasetMeta(datasetIndex);
|
||||
const anims = meta.controller._resolveAnimations(undefined, mode);
|
||||
me.setDatasetVisibility(datasetIndex, visible);
|
||||
|
||||
// Animate visible state, so hide animation can be seen. This could be handled better if update / updateDataset returned a Promise.
|
||||
anims.update(meta, {visible});
|
||||
|
||||
me.update((ctx) => ctx.datasetIndex === datasetIndex ? mode : undefined);
|
||||
if (defined(dataIndex)) {
|
||||
meta.data[dataIndex].hidden = !visible;
|
||||
me.update();
|
||||
} else {
|
||||
me.setDatasetVisibility(datasetIndex, visible);
|
||||
// Animate visible state, so hide animation can be seen. This could be handled better if update / updateDataset returned a Promise.
|
||||
anims.update(meta, {visible});
|
||||
me.update((ctx) => ctx.datasetIndex === datasetIndex ? mode : undefined);
|
||||
}
|
||||
}
|
||||
|
||||
hide(datasetIndex) {
|
||||
this._updateDatasetVisibility(datasetIndex, false);
|
||||
hide(datasetIndex, dataIndex) {
|
||||
this._updateVisibility(datasetIndex, dataIndex, false);
|
||||
}
|
||||
|
||||
show(datasetIndex) {
|
||||
this._updateDatasetVisibility(datasetIndex, true);
|
||||
show(datasetIndex, dataIndex) {
|
||||
this._updateVisibility(datasetIndex, dataIndex, true);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -701,6 +701,9 @@ export default class DatasetController {
|
||||
|
||||
for (i = start; i < start + count; ++i) {
|
||||
const element = elements[i];
|
||||
if (element.hidden) {
|
||||
continue;
|
||||
}
|
||||
if (element.active) {
|
||||
active.push(element);
|
||||
} else {
|
||||
|
42
test/fixtures/controller.doughnut/doughnut-hidden-single.js
vendored
Normal file
42
test/fixtures/controller.doughnut/doughnut-hidden-single.js
vendored
Normal file
@ -0,0 +1,42 @@
|
||||
module.exports = {
|
||||
config: {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['A', 'B', 'C', 'D', 'E'],
|
||||
datasets: [{
|
||||
data: [1, 5, 10, 50, 100],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.8)',
|
||||
'rgba(54, 162, 235, 0.8)',
|
||||
'rgba(255, 206, 86, 0.8)',
|
||||
'rgba(75, 192, 192, 0.8)',
|
||||
'rgba(153, 102, 255, 0.8)'
|
||||
],
|
||||
}, {
|
||||
data: [1, 5, 10, 50, 100],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.8)',
|
||||
'rgba(54, 162, 235, 0.8)',
|
||||
'rgba(255, 206, 86, 0.8)',
|
||||
'rgba(75, 192, 192, 0.8)',
|
||||
'rgba(153, 102, 255, 0.8)'
|
||||
],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
plugins: {
|
||||
legend: false,
|
||||
title: false,
|
||||
tooltip: false,
|
||||
filler: false
|
||||
}
|
||||
},
|
||||
},
|
||||
options: {
|
||||
run(chart) {
|
||||
chart.hide(0, 4);
|
||||
chart.hide(1, 2);
|
||||
}
|
||||
}
|
||||
};
|
BIN
test/fixtures/controller.doughnut/doughnut-hidden-single.png
vendored
Normal file
BIN
test/fixtures/controller.doughnut/doughnut-hidden-single.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 58 KiB |
4
types/index.esm.d.ts
vendored
4
types/index.esm.d.ts
vendored
@ -508,8 +508,8 @@ export declare class Chart<
|
||||
setDatasetVisibility(datasetIndex: number, visible: boolean): void;
|
||||
toggleDataVisibility(index: number): void;
|
||||
getDataVisibility(index: number): boolean;
|
||||
hide(datasetIndex: number): void;
|
||||
show(datasetIndex: number): void;
|
||||
hide(datasetIndex: number, dataIndex?: number): void;
|
||||
show(datasetIndex: number, dataIndex?: number): void;
|
||||
|
||||
getActiveElements(): ActiveElement[];
|
||||
setActiveElements(active: ActiveDataPoint[]): void;
|
||||
|
Loading…
Reference in New Issue
Block a user