zing图表使网页变得缓慢和滞后

我目前正试图在zing Chart上绘制大约200k个数据(时间和频率(。它确实成功地加载了图表，但页面变得非常重，而且滞后了很多。这是我的代码，请指导我是否犯了任何错误，或者如何在不出现页面滞后的情况下绘制数据

我正试图画4张这样的图表——一个相同的网页不同的数据(价值超过20万(

我从APi代码中获取数据。。。

$.ajax({
type: 'GET',
cache: false,
url:url,
data: { startTime : '2022-07-25 10-40-12', endTime : '2022-08-22 17-41-14', tableName : tableName },
success: function (data, textStatus, jqXHR) {
drawTimeVSAngleChart(data[0], data[1],data[2]);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
}
});

在记录数据后，我只调用drawTimeVSAngleChart函数

timeArray , cpuArray, memoryArray these are passed

我的代码

function drawTimeVSAngleChart(timeArray , cpuArray, memoryArray){
$('#lineChart').remove();
$('#canvas_div').append(
'<div id="lineChart" style="min-height: 400px; height: 500px; max-height: 500px; max-width: 100%;"></div>'
);
var configTimeAndAngle = {
"type": "line",
legend: {
layout: "1x2", //row x column // items means in one two we added two items as in legends
x: "35%",
y: "6%",
},
"preview":{
"live":true
},
'scale-x': {
zooming: true,
labels: timeArray,
'max-items':8,
'min-items':7,
item: {
'font-size':10
}
},
'scale-y': {
//zooming: true,
//values: "50:350:50",
guide: {
'line-style': "dotted"
},
item: {
'font-size':10
}
},
tooltip: {
text: 'Time : %kt (X) Freq : %vt (Y).',
alpha: 0.9,
backgroundColor: '#F44336',
borderColor: '#B71C1C',
borderRadius: 2,
borderWidth: 1,
padding: '5 10'
},
gui: {
behaviors: [
{
id: 'DownloadPDF',
enabled: 'none'
},
{
id: 'ViewDataTable',
enabled: 'none'
},
{
id: 'ViewSource',
enabled: 'none'
},
{
id: 'ZingChart',
enabled: 'none'
},
{
id: 'CrosshairHide',
enabled: 'all'
}
]
},
"series": [{
"values": cpuArray,
'line-color': "#3366ff",
'background-color': "#3366ff",
text: "CPU Array"
},
{
"values": memoryArray,
'line-color': "#00cc99",
'background-color': "#00cc99",
text: "Memory Array"
}
]
};
zingchart.render({
id: 'lineChart',
data: configTimeAndAngle,
height: "100%",
width: "100%"
});

}

这个解决方案类似于@lasabahebwa解决方案，但它是我一直在寻找的实际解决方案。我能够毫无问题地绘制100万个点。绘制的数据存在问题。问题是，当我加载图表或应用过滤器图表时，加载数据大约需要9秒。我的解决方案有点不同，因为我给出的数据格式不同，使用的是时间数组。有关详细信息，请阅读问题。

$('#lineChart_f').remove();
$('#canvas_div_f').append(
'<div id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></div>'
);

var configTimeAndAngle = {
"type": "line",
noData:{
text:"No data found",
backgroundColor: "#20b2db"
},
legend: {
layout: "1x2", //row x column // items means in one two we added two items as in legends
x: "35%",
y: "6%",
},
"preview":{
"live":true
},
plot: {
mode: 'fast',
},
'scale-x': {
zooming: true,
labels: timeArray,
item: {
'font-size':10
}
},
'scale-y': {
'auto-fit': true,
'min-value':30,
'max-value':70,
guide: {
'line-style': "dotted"
},
item: {
'font-size':10
}
},
'crosshair-x': {
text: 'Time : %kt (X) Freq : %vt (Y).',
'line-style': 'dashed',
'line-width': 2,
'line-color': '#2196F3',
marker: {
type: 'triangle',
size: 5,
visible: true
}
},
gui: {
behaviors: [
{
id: 'DownloadPDF',
enabled: 'none'
},
{
id: 'ViewDataTable',
enabled: 'none'
},
{
id: 'ViewSource',
enabled: 'none'
},
{
id: 'ZingChart',
enabled: 'none'
},
{
id: 'CrosshairHide',
enabled: 'all'
}
]
},
"series": [{
"values": frequency_array_ff,
'line-color': "#3366ff",
'background-color': "#3366ff",
text: "Centeral Frequency"
},
{
"values": frequency_array_fh,
'line-color': "#00cc99",
'background-color': "#00cc99",
text: "Frequency Hopping"
}
]
};
zingchart.QUOTEDVALUES = true;
zingchart.render({
id: "lineChart_f",
height: "100%",
width: "100%",
output: "canvas",
data: configTimeAndAngle
});

不幸的是，当您进入更大的数据集(20k多个节点(时，当前库会变得更慢。我们如何应对这种情况？虽然没有直接的性能解决方案，但您可以采取一些基本步骤来实现相对的性能提升，例如以下方法的任何组合。

相关内容

最新更新

热门标签：