Highcharts條形圖動畫只能在1系列上工作

我從Web服務每x秒刷新一次條形圖的數據並根據其值對顏色進行編碼。角$interval我使用看起來像這樣：Highcharts條形圖動畫只能在1系列上工作

mainInterval = $interval(function() { 
     console.debug("interval"); 
     for (x = 0; x < 5; x++) { 
     var temp = Math.random() * 100; 
     if (temp > 75) { 
      $scope.chart.series[x].update({ 
      color: "red" 
      }); 
      $scope.chart.series[x].setData([temp]); 
     } else if (temp > 50) { 
      $scope.chart.series[x].update({ 
      color: "orange" 
      }); 
      $scope.chart.series[x].setData([temp]); 
     } else if (temp > 25) { 
      $scope.chart.series[x].update({ 
      color: "yellow" 
      }); 
      $scope.chart.series[x].setData([temp]); 
     } else { 
      $scope.chart.series[x].update({ 
      color: "grey" 
      }); 
      $scope.chart.series[x].setData([temp]); 
     } 
     } 

    }, 5000);

但我遇到的問題是，一旦它經過的間隔在第一時間，動畫不再顯示底部4個酒吧，只是頂一個。例如，如果將間隔更改爲

mainInterval = $interval(function() { 
     console.debug("interval"); 
     for (x = 0; x < 5; x++) { 
     var temp = Math.random() * 100; 
      $scope.chart.series[x].setData([temp]); 
     } 
    }, 5000);

循環之間的動畫效果很好，但顏色不會明顯變化。任何想法來解決這個問題？ Here is the plunker I am working on.

來源

2015-05-14 erp

爲什麼更新全系列和設置數據？相反，我會用特定的顏色更新點，例如：http://plnkr.co/edit/kQPqGQrbM31bBx8tOtlb?p=preview **注意：**我將'redraw'標誌設置爲false，只運行一次動畫。 –

哇，這工作得很好。我想我想我會更新，因爲我知道該系列只有一個數據點。這是我唯一對高地圖的抱怨。所有條形圖都是爲了獲得多個點而製作的。但是，還有什麼辦法可以做你正在做的事情，但也要更新圖例顏色？這是該系列更新的其他好處之一。我不一定需要這個傳說，只是爲了能夠看到沒有懸停的名字？ – erp

問題是'''series.update（）'會刪除那個漂亮的動畫。解決方法是首先更新顏色，然後是'setData（）'。例如：http://plnkr.co/edit/NbzYPwoLdCrgHQ4iTF59?p=preview - 兩個單獨的for，我們需要調用兩次'chart.redraw（）'。現在它是性能與設計之間的問題;） –

問題是，series.update()將刪除那個漂亮的動畫。解決方法是首先更新顏色，然後setData()。例如：http://plnkr.co/edit/NbzYPwoLdCrgHQ4iTF59?p=preview - 兩個單獨的for，我們需要撥打chart.redraw()兩次。現在它是性能與設計之間的問題;）

mainInterval = $interval(function() { 

     for (x = 0; x < 5; x++) { 
     var temp = Math.random() * 100, 
      color; 
     if (temp > 75) { 
      color = "red"; 
     } else if (temp > 50) { 
      color = "orange"; 
     } else if (temp > 25) { 
      color = "yellow"; 
     } else { 
      color = "grey"; 
     } 
      $scope.chart.series[x].update({ 
      color: color, 
      nextData: [temp] 
      },false); 
     } 

     $scope.chart.redraw(); 

     $.each($scope.chart.series, function(i, s) { 
     s.setData(s.options.nextData, false); 
     }); 

     $scope.chart.redraw(); 

    }, 5000);

來源

2015-05-14 13:58:00

Highcharts條形圖動畫只能在1系列上工作

回答

相關問題