Добавить и удалить данные одновременно на график ChartJS - PullRequest
Новая
       16

Добавить и удалить данные одновременно на график ChartJS

2 голосов
/ 18 июня 2019

В целях визуализации я пытаюсь добавить данные на диаграмму и одновременно удалять первую точку данных с диаграммы каждые 500 мс.

Это работает, когда я выполняю .addData() или removeData() самостоятельно, но когда я пытаюсь объединить их в одну функцию для одновременного запуска, ни одна из них не работает.

Можно ли как-то создать эту функцию, чтобы одновременно добавлять и удалять данные, или как минимум удалить первую точку данных вскоре после того, как я добавил новую последнюю точку данных?

Вот данные и настройки: 

    var ctx = document.getElementById('myChart').getContext('2d');
    ctx.height = 220;
    var data = {
  "labels": [
    "0",
    "1",
    "2",
    "3",
        "4"
  ],
  "datasets": [
    {
      "label": "2014",
      "backgroundColor": "#0055FA",
      "fill": true,
      "data": [
        "50",
                "40",
        "55",
        "35",
        "45",
        "50",
        "15",
                "100"
      ],
      "borderColor": "transparent",
      "borderWidth": "0",
            "pointBackgroundColor":"#ffffff"
    }
  ]
};
    var options = {
  "title": {
    "display": false,
    "text": "Ad Revenue Comparison 2014-2015",
    "position": "bottom",
    "fullWidth": true,
    "fontColor": "#aa7942",
    "fontSize": 16
  },
  "legend": {
    "display": false,
    "fullWidth": true,
    "position": "top"
  },
  "scales": {
    "yAxes": [
      {
        "ticks": {
          "beginAtZero": true,
          "display": true
        },
        "gridLines": {
          "display": false
        },
        "scaleLabel": {
          "display": false,
          "labelString": "USD in Millions"
        },
        "display": false
      }
    ],
    "xAxes": {
      "0": {
        "ticks": {
          "display": false
        },
        "display": false,
        "gridLines": {
          "display": false
        },
        "scaleLabel": {
          "display": false
        }
      }
    }
  },
  "tooltips": {
    "enabled": false
  },
  "elements": {
    "arc": {
      "backgroundColor": "#009BD0"
    },
    "line": {
      "backgroundColor": "#009BD0",
      "fill": true,
      "borderColor": "#e2fdff"
    },
    "point": {
      "radius": 3,
      "pointStyle": "circle",
      "backgroundColor": "#ffffff"
    }
  }
};

Вот функции: 

    var myChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: options
    });

  function removeData(chart) {
      chart.data.labels.pop();
      chart.data.datasets.forEach((dataset) => {
          dataset.data.pop();
      });
      chart.update();
  }

  function addData(chart, label, data) {
      chart.data.labels.push(label);
      chart.data.datasets.forEach((dataset) => {
          dataset.data.push(data);
      });
      chart.update();
  }


setInterval(function(){ 
    addData(myChart,"4",Math.floor(Math.random() * 60)); 
    removeData(myChart);
}, 500);
//setInterval(function(){ removeData(myChart); }, 500);

</script>
...