Home vue.js update chart when changing the properties of graphs (VUE-CHARTJS)

update chart when changing the properties of graphs (VUE-CHARTJS)




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.

Show code

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:

Show code

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:
   // 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 ();

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions