如何提高高圖表創建和渲染的性能

我有本地文件，其格式爲JSON格式的數據。我創建了一個PHP腳本，以便在通過AJAX撥打電話時回顯此文件的輸出。數據文件的大小爲59k。我遵循高樓建議來禁用動畫和陰影。當我加載圖表時，渲染需要非常非常長的時間。我已經粘貼了下面的腳本。我能做些什麼來渲染這張圖表更快？就目前而言，這絕對不可接受。如何提高高圖表創建和渲染的性能

echo_file.php輸出看起來是這樣的：

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

這是腳本：

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

     }); 
    } 

});

來源

2013-07-09 user1471980

嘗試使用這樣的想法：http://www.highcharts.com/stock/demo/lazy-loading – svillamayor

@svilamayor，我想，沒有任何的運氣。 – user1471980

你想在圖表中顯示多少點？你確定這是呈現時間，而不是從服務器獲取數據的時間？ – svillamayor

即使該文件是本地數據必須到瀏覽器，因爲圖表繪製有，在這裏是一個有52k點的例子，圖表加載非常快。

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

如果你的情況，你有太多的點，也許你應該採取某些機制，對有代表性的樣本劃分，因爲它沒有任何意義，以顯示在圖表中當眼不能在不同的價值觀之間的區別。

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

來源

2013-07-09 14:29:32 svillamayor

當我做到這一點時，它非常快：$ .getJSON（'cdc1.txt'，函數（數據），但是，我真的需要這個是ajax調用。我怎樣才能把$ getJSON放入ajax？ – user1471980

$ .getJSON是一個速記Ajax的功能，這相當於：$就（{ 數據類型：「JSON」，網址：網址，數據：數據，成功：成功 }）; – svillamayor

當我做$的getJSON（「<文件NAME>「）它可以工作，但是在這裏我想調用一個PHP文件來回應文件的輸出，當我getJson（」get_file.php「）不起作用時，還有，我可以給它什麼選項這個getjson每5分鐘運行一次？ – user1471980

Highcharts剛剛發佈了一個升壓模塊，有助於加快與大量數據點的圖表。你需要一個現代的瀏覽器來使用它。

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

這是我highcharts選項時，我想加快渲染。它刪除所有動畫，點擊事件和工具提示。

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

來源

2015-08-27 13:55:24 TWilly

如何提高高圖表創建和渲染的性能

回答

相關問題