背景中的多个图表ChartJS

Question

我在使用chart.js生成一个图表时遇到问题，但是当我从同一页面的菜单中生成另一个图表时，它会生成图表，但是当我在图表上移动时，它会更改为上一个图表

更新

在chart.js文档中进行了一些研究后发现了一种清除图表数据的方法，在获取新数据之前已经应用于控制器，不幸的是，当鼠标悬停在图表上时，我们继续在后台获取以前的图表。包含值的数组，并使用最新请求的数据进行更新。

来自控制器的代码

 $scope.getChart = function (report) {
 $scope.modalLabels = [];
 $scope.data = {values: ([])}; //Array that contains the data recieved from the server
if($('#chartBar')!=null){
        $('#chartBar').removeData();
    }
/*Function to request data to server*/
//If data recieved
 var avgCapacity = [];
   for (var i = 0, length = data.length; i < length; i++) {
      avgCapacity.push(data[i].Volume);
      $scope.modalLabels.push(data[i].Day + "/" + data[i].Month);
            }
      $scope.data.values = ([avgCapacity]);

这是背后的html：

<div ng-hide="data==0">
    <h4 id="chartTitle"><b>{{Title}}</b></h4>
<canvas id="ChartBar" class="chart chart-bar" chart-data="data" chart-options="options"
        chart-labels="modalLabels" chart-legend="true" chart-series="series">
</canvas>
</div>

Answer 1

您需要在生成新图表之前调用.destroy()来销毁先前的图表实例。