HighCharts с динамическими данными не работает

У меня есть проект ASP.NET MVC с SignalR.HighCharts с динамическими данными не работает

У меня есть страница с HighChart и сценарий выглядит следующим образом:

$(function() { 
window.Highcharts.setOptions({ 
    global: { 
     useUTC: false 
    } 
}); 

var chart; 

$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line', 
      marginRight: 10 
     }, 
     title: { 
      text: 'GMAS Queues' 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickInterval: 500, 
      labels: { 
       enabled: false 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'Queue Count' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     legend: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Processing Queues' 
     }] 
    }); 

}); 

$.connection.hub.logging = true; 
// Reference the auto-generated proxy for the hub. 
var chartData = $.connection.processingQueuesHub; 
// Create a function that the hub can call back to display messages. 
chartData.client.updateQueueCounts = function (data) { 
    //$.each(data, function(i, item) { 
    // // Add the message to the page. 
    // $('#chartDataLog').append('<li><strong>' + htmlEncode(item.QueueName) 
    //  + '</strong>: ' + htmlEncode(item.Length) + '</li>'); 
    //}); 
    // set up the updating of the chart. 
    var series = chart.series[0]; 

    $.each(data, function (i, item) { 
     if (item.QueueName == "Queue A") { 
      var x = Date.parse(item.Date), 
      y = item.Length; 

      series.addPoint([x, y], true, false); 
     } 
    }); 


};

Однако, я вижу, граф, но не точки. Chart with no points Странная часть точек данных серии есть: Chrome shows the data points

Кто знает, почему Highcharts не делает точки?

Спасибо, Билл N

источник

2015-06-10 BillN

Попробуйте настроить свои варианты высоких диаграмм, например: 'series: [{name: 'Processing Queues', data: []}]'. Посмотрите, возвращает ли это что-нибудь. – wergeld

Спасибо, пробовал тоже, но все еще нет точек данных. – BillN

Это интересно. Все выглядит более или менее правильно. У вас есть ошибки в консоли? Возможно, ваши данные не отсортированы по возрастанию по значениям x? Любые шансы настроить живую демонстрацию, так что мы можем отладить это? Также убедитесь, что у вас есть последние Highcharts (4.1.5). –

Похоже, вы не определить, что ваш chart.series это, пока не будет создано. Строка в вашем AJAX заключается в следующем, и его не ждет DOM готового:

var series = chart.series[0];

Но вы никогда не определите chart до $(document).ready(function() {.... Попробуйте сохранить объект диаграммы в рамках вашего ajax.

источник

2015-06-10 18:38:52 wergeld

Спасибо @wergeld, но я попытался поместить весь код в событие document.ready и все тот же. – BillN

Я должен поблагодарить моего хорошего друга и соискателя за то, что вы поняли это. Он умнее и храбрее, чем я. :) Он пошел к источнику highcharts и обнаружил, что высокие диаграммы ломаются, если вы добавите в серию графов до того, как начальная анимация будет завершена. Анимация - это то, что клип-прямоугольник имеет нулевую ширину (он анимируется от нуля до полной ширины в течение 1 с при создании диаграммы). Вы в конечном итоге добавляете точку в серию, прежде чем эта анимация даже начнется. Это убивает анимацию, но не фиксирует ширину клипа. Исправлено добавление анимации для серии.

series: [{ name: 'Processing Queues', data: [], animation: false }]

источник

2015-06-11 15:47:23 BillN

HighCharts с динамическими данными не работает

ответ

Смежные вопросы