如何將KendoUI圖表與SignalR集成

Question

我想使用Kendo ui圖表和信號器創建實時圖表。我看到這個example，但沒有代碼。所以我一個人嘗試。

我的代碼有點示範：

起初，我創建了一個劍道圖表

function queueActivityChart() { 
    $("#queueActivityChart").kendoChart({ 
     legend: { 
      visible: true 
     }, 
     seriesDefaults: { 
      labels: { 
       visible: true, 
       format: "{0}", 
       background: "transparent" 
      } 
     }, 
     series: [{ 
      type: "line", 
      field: "Incoming", 
      categoryField: "DateTime", 
     }], 
     valueAxis: { 
      labels: { 
       format: "{0}" 
      }, 
      line: { 
       visible: false 
      } 
     }, 
     categoryAxis: { 
      labels: 
       { 
        rotation: -90, 
        dateFormats: 
         { 
          seconds: "ss", 
          minutes: "HH:mm:ss", 
          hours: "HH:mm", 
          days: "dd/MM", 
          months: "MMM 'yy", 
          years: "yyyy" 
         } 
       }, type: "Date", field: "DateTime", baseUnit: "seconds" 
     } 

    }); 
    var chart = $("#queueActivityChart").data("kendoChart"); 
    chart.options.transitions = false; 
} 

$(document).ready(queueActivityChart); 
$(document).bind("kendo:skinChange", queueActivityChart); 

然後，我有這部分代碼，從服務器數據

$scope.signalRData = []; 
    $scope.signalR.on('receiveCounters', function (data) { 
     $scope.queueData = data; 
     for (var i = 0; i < data.length; i++) { 
      $scope.signalRData.push(data[i]); 
     } 
     while ($scope.signalRData.length > 12) { 
      $scope.signalRData.splice(0, 1); 
     } 
     $("#queueActivityChart").data("kendoChart").setDataSource(
      new kendo.data.DataSource({ 
       group: { 
        field: "Name" 
       }, 
       data: $scope.signalRData 
     })); 
    }); 

這讓作品！我得到最新更新項目的圖片。

但問題是這個圖表就像是把一張圖片放在其他圖片的前面。我的意思是這是第一次加載數據源;創建我的數據圖表，第二次我的數據發生了變化，有些值仍然在我的數組中，其他一些數據已經移出，第三次也是如此。

它似乎將我當前數據的圖片放在 之前的數據前面。這不是冰沙並且不能使用圖表的傳說 屬性，因爲我每次初始化我的數據源。

有人可以幫助我如何創建一個像劍道官方例子的實時數據的冰沙劍道圖？也可以以某種方式添加滾動條到底部？

Answer 1

我看着爲基準的代碼，我認爲你可能你的圖表是renderAs: "canvas"

而且在缺少，在本例中，數據在本地（保存）保存，然後移動，以便它創建您可能會談論的「平滑」效果。

下面是代碼，您可以感興趣：

function step() { 
    addPoint(); 
    $("#chart").data("kendoChart").refresh(); 
    frames++; 
    if (playing) { 
     kendo.animationFrame(step); 
    } 
} 

function addPoint() { 
    var stockData, 
     change, 
     lastValue; 

    // Shift existing categories to the left and add the next date at the end 
    lastDate = new Date(lastDate.getTime() + TICKS_PER_DAY); 
    categoryList.push((lastDate.getMonth() + 1) + "/" + (lastDate.getDay() + 1)); 

    if (categoryList.length > POINTS) { 
     categoryList.shift(); 
    } 

    for (var i = 0; i < stocks.length; i++) { 
     stockData = stocks[i]; 
     change = (Math.random() > 0.5 ? 1 : - 1) * Math.random() * 10; 
     lastValue = stockData[stockData.length - 1] || Math.random() * 10; 

     // Add a new pseudo-random data point 
     stockData.push(Math.min((i + 1) * 20, Math.max((i + 1) * 10, lastValue + change))); 

     // Shift the data points of each series to the left 
     if (stockData.length > POINTS) { 
      stockData.shift(); 
     } 
    } 
} 

查看您所在example爲完整的源代碼的源代碼，並使用dojo測試我們自己的代碼，輕鬆地玩它