Yüksek grafiklerin oluşturulmasını ve görüntü oluşturma performansını nasıl artırırsınız?

Question

Biçimlendirilmiş veriler JSON olan yerel bir dosyam var. AJAX aracılığıyla arama yaparken bu dosyanın çıktısını dışarı çıkarmak için çok az PHP komut dosyası oluşturduk. Veri dosyasının boyutu 59k. Animasyon ve gölgeyi devre dışı bırakmak için highcharts tavsiyesini takip ettim. Grafiği yüklediğimde, işlemek için çok uzun bir zaman alır. Aşağıdaki senaryoyu yapıştırdım. Bu grafiği daha hızlı hale getirmek için neler yapabilirim? Bu haliyle, kesinlikle kabul edilemez.

echo_file.php çıktı şuna benzer:

[{"name":"loess","data":[[1373241600000,3.49571041760408],[1373241660000,3.4844505982485],[1373241720000,3.47324293684199],[1373241780000,3.46208745646435],[1373241840000,3.45098418019539],[1373241900000,3.43993313111491],[1373241960000,3.42893433230273],[1373242020000,3.41798780683864],[1373242080000,3.4070935778 
43611722495],[1373243400000,3.18069824879358],[1373243460000,3.17101320762565],[1373243520000,3.16138101680096],[1373243580000,3.15180169939934],[1373243640000,3.14227527850057],[1373243700000,3.13280177718446],[1373243760000,3.12338121853083],[1373243820000,3.11401362561948],[1373243880000,3.10469902153021]]}] 

bu script: Dosya grafik orada çizilir beri yerel veri burada, tarayıcıya seyahat etmeliyim olduğunu

$(document).ready(function() { 


var seriesOptions = [], 
    yAxisOptions = [], 
    colors = Highcharts.getOptions().colors; 

function myAjax() { 
    $.ajax({ 
       url: 'echo_file.php', 
       datatype: 'json', 
       success: function(data) { 

        seriesOptions=data; 
        createChart(); 
       }, 

       cache: false  
       }); 
} 

setInterval(myAjax, 300000); 


    function createChart() { 

     $('#container').highcharts('StockChart', { 
      chart: { 
       animation: false, 
       shadow: false 

      }, 
      title : { 
      text : 'CPU Utilization' 
     }, 

      plotOptions: { 

      series: { 
       lineWidth: 2 
      } 
     }, 

      rangeSelector: { 
       enabled: true, 
       buttons: [{ 
         type: 'minute', 
         count: 60, 
         text: 'hourly' 
        }, { 
         type: 'all', 
         text: 'All' 
        }] 
      }, 
      credits: { 
       enabled: false 
      }, 
      xAxis: { 
       type: 'datetime', 
       minPadding:0.02, 
       maxPadding:0.02, 
       ordinal: false 



      }, 


      yAxis: { 
       labels: { 
        formatter: function() { 
         //return (this.value > 0 ? '+' : '') + this.value + '%'; 
         return (this.value); 
        } 
       } 

      }, 


      yAxis : { 
       title : { 
        text : '% CPU Utilization' 
       }, 
       min:0, 
       max:100, 

       plotLines : { 
        value : 70, 
        color : '#FFA500', 
        dashStyle : 'shortdash', 
        width : 2, 
        label : { 
         text : 'Threshold', 
         align:'right' 
        } 
       }       

      }, 
      scrollbar: { 
        enabled: true 
        }, 
      navigator : { 
       adaptToUpdatedData: false 

      }, 


      tooltip: { 
       pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} </b>', 
       valueDecimals: 2 
      }, 

      series: seriesOptions 

     }); 
    } 

}); 

Answer 1

bile 52k puan ile bir örnek ve grafik oldukça hızlı yüklenir. sizin durumunuzda size temsilci örnekler üzerinde bölmek için bazı mekanizmalar almalı belki çok fazla nokta varsa o göz farklı değerler ayırt edemez bir grafiğini göstermek için hiçbir anlamı olduğu gibi

,

http://highcharts.com/stock/demo/data-grouping gör .

http://highcharts.com/stock/demo/lazy-loading

Answer 2

Highcharts sadece veri noktalarının büyük miktarda bulunduğu grafikleri hızlandırmak yardımcı olan bir boost modülü serbest bakın. Bunu kullanmak için modern bir tarayıcıya ihtiyacınız var. Ben daha hızlı oluşturulması istediğinizde

https://github.com/highslide-software/highcharts.com/blob/master/js/modules/boost.src.js

Bu benim Highcharts seçenekleridir. Tüm animasyonları, tıklama olaylarını ve araç ipuçlarını kaldırır. Bu fikri kullanarak

Highcharts.setOptions({ 
    plotOptions: { 
     area: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     arearange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     areaspline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     areasplinerange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     bar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     boxplot: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     bubble: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     column: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     columnrange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     errorbar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     funnel: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     gauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     heatmap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     line: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     pie: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     polygon: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     pyramid: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     scatter: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     series: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     solidgauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     spline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     treemap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
     waterfall: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } }, 
    }, 
    chart: { 
     reflow: false, 
     events: { 
      redraw: function() { 
       console.log("highcharts redraw, rendering-done"); 
       $('body').addClass('rendering-done'); 
      } 
     }, 
     animation: false 
    }, 
    tooltip: { 
     enabled: false, 
     animation: false 
    }, 
    exporting: { 
     enabled:false 
    }, 
    credits: { 
     enabled: false 
    } 
});