5
Tôi có một tệp cục bộ có JSON dữ liệu được định dạng. Tôi đã tạo ra ít tập lệnh PHP để phản hồi đầu ra của tệp này khi gọi qua số AJAX. Kích thước của tệp dữ liệu là 59k. Tôi đã làm theo đề xuất highcharts để tắt hoạt ảnh và bóng tối. khi tôi tải biểu đồ, phải mất một thời gian rất dài để kết xuất. Tôi đã dán tập lệnh bên dưới. Bất kỳ ý tưởng nào tôi có thể làm để hiển thị biểu đồ này nhanh hơn? Khi nó đứng, điều này chắc chắn là không thể chấp nhận được.Làm cách nào để bạn tăng hiệu suất của việc tạo và biểu đồ biểu đồ highcharts
echo_file.php đầu ra trông như thế này:
[{"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]]}]
đây là kịch bản:
$(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
});
}
});
Hãy thử sử dụng ý tưởng này: http://www.highcharts.com/stock/demo/lazy-loading – svillamayor
@svilamayor, tôi đã thử mà không có bất kỳ may mắn nào. – user1471980
Bạn muốn hiển thị bao nhiêu điểm trong biểu đồ? Bạn chắc chắn đó là thời gian hiển thị và không phải là thời gian để đưa dữ liệu từ máy chủ? – svillamayor