By default, the legend is added to each of the linear graphs. When clicking on the legend of the chart, the corresponding schedule is hidden or shown in the diagram. Sample chart with a shown schedule:
But I would like to realize this functionality together with a multi-selector, which is a set of checkbox . Each of checkbox corresponds to one of the linear graphs on the diagram.
Answer 1, Authority 100%
Main essence: When the properties of each of the objects of the array objects, the observer starts the method of recalculating the properties of linear graphs and the diagram updates.
Brief example from documentation :
Watch: {
ChartData () {
This. $ data._chart.update ();
}
}
As an example, your code is taken as the basis, but much is abolished in order not to make an array of marked checkbox . Demo:
Answer 2
were unpredictable glitches I had to change the slightly code using https: // www .chartjs.org / docs / latest / developers / api.html # GetDataSetMetaindex
Methods: {
UpdateChart (Newval) {
// for the demo used this design, but
// Perhaps you need to use in your projects.
// In particular, if an error occurs:
// & gt; CANNOT READ PROPERTY 'UPDATE' OF UNDEFINED
// Const Chart = this. $ data._chart;
Const Chart = this._chart;
// Make an array from the names of the marked `Checkbox`.
Const selected = this. $ props.selected
.map ((Item) = & gt; item.checked & amp; & amp; item.name);
// Switching Datasets
Chart.Data.DataSets.Foreach ((DataSet, i) = & gt; {
// Magic function of obtaining meta data on dataset
var Meta = Chart.GetDataSetmeta (I);
// If the label is not included in the list of favorites, then Hidden = True otherwise False
Meta.hidden =! selected.includes (dataset.label);
});
// Update the diagram.
chart.update ();
}
}
});