Добавление точек данных в Highcharts

Question

Мне было поручено отображать несколько диаграмм на странице (asp.net), все из которых динамически генерируются, поскольку количество графиков является случайным. У меня было очень длительное время загрузки (страница не отвечала и т. Д.) И обнаружила, что она была на стороне клиента, где были добавлены последовательные точки.

Я понял, что это произошло из-за моего отсутствия понимания высоких графиков и «лишней» работы, которую я могу дать ему сделать с этим подходом.

Сначала я создаю новый контейнер «div», присоединяю его к странице, запускаю его как объект с высоким качеством, затем добавляю точки.

jQuery.each(hotCakes, function (a, value) { 

      var thecpuchartsmall = { 
       chart: { type: 'area' }, 
       title: { text: value.vmName + " processor usage %" } 
      }; 

      //Create New Div 
      var theDiv = document.createElement('div'); 
      var newId = "div_" + value.vmName; 

      theDiv.className = 'vmCPU_Div'; 
      theDiv.id = newId; 
      $("#divAllVM").append(theDiv); 

      //Create the Chart, assign to Div  
      $("#" + newId).highcharts(thecpuchartsmall); 

      var tmpChart = $("#" + theDiv.id).highcharts(); 
      tmpChart.addSeries({ name: value.vmName, data: [] }); 

      jQuery.each(value.dateValue, function (v, dateValues) { 
       tmpChart.series[0].addPoint([Date.parse(dateValues[0]), parseFloat(dateValues[1])]); 
      }); 
     }); 

это проблема:

tmpChart.series[0].addPoint(..) 

он не любит делать это в течение 30 минут или до 300 точек данных. Затем я решил просто создать массив, нажать все значения там и назначить его один раз для серии. Время загрузки (в моем тесте) пошло от 40 секунд до 10 секунд (6 секунд для данных АЯКСА)

этого решения:

  var myData = []; 
      jQuery.each(value.dateValue, function (v, dateValues) { 
       myData.push([Date.parse(dateValues[0]), parseFloat(dateValues[1])]); 
      }); 

      me.series[0].setData(myData); 

Что именно Highcharts делать в первом сценарии с длительное время загрузки?

Answer 1

Если вы посмотрите на API documentation, Highcharts добавили точку, а затем перерисовку графика (опция redraw по умолчанию соответствует true)!

Пожалуйста, обратите внимание, что для наилучшей производительности вы должны создавать диаграммы с данными уже на месте:

 var myData = []; 
     jQuery.each(value.dateValue, function (v, dateValues) { 
      myData.push([Date.parse(dateValues[0]), parseFloat(dateValues[1])]); 
     }); 

     var thecpuchartsmall = { 
      chart: { type: 'area' }, 
      title: { text: value.vmName + " processor usage %" }, 
      series: [{data: myData, name: value.vmName}] 
     }; 

     $("#" + newId).highcharts(thecpuchartsmall);