Как интегрировать диаграмму KendoUI с SignalR

Question

Я хочу создать график в реальном времени, используя диаграмму Kendo ui и signalr. Я вижу это 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 
     })); 
    }); 

Этот работает! И я получаю изображение последних обновленных элементов.

Но проблема в том, что эта диаграмма похожа на то, чтобы поставить одну картинку напротив другой. Я имею в виду, что это первый раз, когда нагрузка Источник данных; который создает диаграмму моих данных, второй раз, когда мои данные изменились, некоторые значения по-прежнему находятся в моем массиве, некоторые другие уходят, а третий тоже.

Похоже, что это помещает фотографии моих текущих данных перед предыдущих данных. Это не smoothie и не может использовать легенду диаграммы , потому что я инициализирую свой источник данных каждый раз.

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

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, чтобы проверить наш свой код и поиграйте с ним легко