Jak zwiększyć wydajność tworzenia wykresów wysokiej jakości i renderowania

Mam plik lokalnie, który ma sformatowane dane w formacie JSON. Stworzyłem mały skrypt PHP, aby wyprowadzić wyjście tego pliku podczas połączenia przez AJAX. Rozmiar pliku danych to 59k. Postępowałem zgodnie z zaleceniem highcharts, aby wyłączyć animację i cień. kiedy ładuję wykres, renderowanie zajmuje bardzo bardzo dużo czasu. Wkleiłem poniższy skrypt. Jakieś pomysły, co mogę zrobić, aby uczynić ten wykres szybszym? W obecnej formie jest to zdecydowanie nie do przyjęcia.Jak zwiększyć wydajność tworzenia wykresów wysokiej jakości i renderowania

echo_file.php wyjście wygląda następująco:

[{"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]]}]

to skrypt:

$(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 

     }); 
    } 

});

Źródło

2013-07-09 user1471980

Spróbuj użyć tego pomysłu: http://www.highcharts.com/stock/demo/lazy-loading – svillamayor

@svilamayor starałem że bez powodzenia. – user1471980

Ile punktów chcesz pokazać na wykresie? Jesteś pewien, że to jest czas renderowania, a nie czas na przeniesienie danych z serwera? – svillamayor

Nawet jeśli plik jest dane lokalne muszą podróżować do przeglądarki, ponieważ wykres jest rysowany tam, tutaj to przykład z 52 punktami, a wykres jest ładowany dość szybko.

Zobacz http://highcharts.com/stock/demo/data-grouping

Jeśli w twoim przypadku masz zbyt wiele punktów może należy podjąć pewne mechanizm podzielić na reprezentatywnych próbkach, ponieważ nie ma sensu, aby pokazać wykres gdzie oko nie może rozróżnić pomiędzy różnymi wartościami .

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

Źródło

2013-07-09 14:29:32 svillamayor

Kiedy to zrobiłem, jest bardzo szybki: $ .getJSON ('cdc1.txt', funkcja (dane), ale naprawdę potrzebuję tego, aby wywołać ajax.) Jak mogę wstawić $ getJSON do ajax'a? – user1471980

$ .getJSON jest skrótowym funkcja Ajax, co jest równoważne: $ .ajax ({ dataType: "json", URL: URL, danych: dane, sukcesów: sukces }); – svillamayor

kiedy robię $ getJSON (" ") to działa, ale tutaj chciałbym wywołać plik php, który brzmi echo ouput pliku.Jeśli zrobię getJson (" get_file.php "), nie działa. Również, jakie opcje mogę dać mu do tego getjson biegać co 5 minut? – user1471980

Highcharts właśnie wydała moduł doładowania, który pomaga przyspieszyć wykresy z dużą ilością punktów danych. Aby to wykorzystać, potrzebujesz nowoczesnej przeglądarki.

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

To Opcje moi highcharts gdy chcę przyspieszyć rendering. Usuwa wszystkie animacje, zdarzenia kliknięć i podpowiedzi.

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 
    } 
});

Źródło

2015-08-27 13:55:24 TWilly

Jak zwiększyć wydajność tworzenia wykresów wysokiej jakości i renderowania

Odpowiedz

Powiązane problemy