Come aumentare le prestazioni della creazione e del rendering del grafico highcharts

Ho un file localmente con dati formattati JSON. Ho creato un piccolo script PHP per echeggiare l'output di questo file quando si chiama tramite AJAX. La dimensione del file di dati è 59k. Ho seguito la raccomandazione dei grafici alti per disabilitare l'animazione e l'ombra. quando carico il grafico, ci vuole molto molto tempo per il rendering. Ho incollato la sceneggiatura qui sotto. Qualche idea su cosa posso fare per rendere questo grafico più veloce? Così com'è, questo non è assolutamente accettabile.Come aumentare le prestazioni della creazione e del rendering del grafico highcharts

echo_file.php uscita è simile al seguente:

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

Questo è lo script:

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

     }); 
    } 

});

fonte

2013-07-09 user1471980

Provare a utilizzare questa idea: http://www.highcharts.com/stock/demo/lazy-loading – svillamayor

@svilamayor, ho provato che senza alcuna fortuna. – user1471980

Quanti punti vuoi mostrare nel grafico? Sei sicuro che sia il tempo di rendering e non il tempo di portare i dati dal server? – svillamayor

Anche se il file è di dati locali devono viaggiare al browser, dal momento che il grafico viene disegnato là, qui è un esempio con 52k punti e il grafico è caricato abbastanza velocemente.

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

Se nel tuo caso hai troppi punti forse si dovrebbe richiedere un certo meccanismo per dividere su campioni rappresentativi, in quanto non ha senso per mostrare un grafico dove l'occhio non può distinguere tra i diversi valori .

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

fonte

2013-07-09 14:29:32 svillamayor

quando ho fatto questo è molto veloce: $ .getJSON ('cdc1.txt', funzione (dati) ma, ho davvero bisogno che questa sia chiamata ajax. Come posso mettere $ getJSON in ajax? – user1471980

$ .getJSON è un funzione di stenografia Ajax, che è equivalente a: $ .ajax ({ dataType: "json", URL: URL, dati: i dati, successo: successo }); – svillamayor

quando faccio $ getJSON (" ") funziona, ma proprio qui mi piacerebbe chiamare un file php che echi l'uscita del file. Quando faccio getJson (" get_file.php "), non funziona. Inoltre, quali opzioni posso dargli a questo getjson a correre ogni 5 minuti? – user1471980

Highcharts appena rilasciato un modulo di spinta che aiuta a velocizzare i grafici con grandi quantità di punti dati. Hai bisogno di un browser moderno per usarlo.

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

Si tratta di opzioni miei Highcharts quando voglio velocizzare il rendering. Rimuove tutta l'animazione, clicca eventi e tooltip.

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

fonte

2015-08-27 13:55:24 TWilly

Come aumentare le prestazioni della creazione e del rendering del grafico highcharts

risposta

Problemi correlati