谷歌折线图中的内存泄漏 [英] Memory leak in google line charts
问题描述
我一直在研究谷歌图表库中的内存泄漏问题。没有发现任何有助于我的情况。不知道到目前为止这个更新是什么。我看到谷歌图表开发团队正在尝试修复它，并发布新的更新。
我使用折线图，数据来自websockets。这是不断更新。
在此先感谢
以下是我用于从websockets获取数据的代码。当连接套接字时，drawChart函数每秒被调用一次。意思是整个折线图被重绘
函数drawVisualization（）{
var data = new google。 visualization.DataTable（）;
data.addColumn（'string'，'data'）;
data.addColumn（'number'，'date'）;
var data_test = new google.visualization.DataTable（）;
data_test.addColumn（'string'，'data test'）;
data_test.addColumn（'number'，'date test'）; （i> 0; i
if（i> = 120）{
data.removeRow（$ 0）;
valueArr.splice（0，2）;
timeArr.splice（0，2）;
}
data.addRow（[timeArr [i]，valueArr [i]]）; $ i
（i = 1; i< valueArr.length; i + = 2）{
if（i> = 120）{
data_test.removeRow（0）;
valueArr.splice（0，2）;
timeArr.splice（0，2）;
}
data_test.addRow（[timeArr [i]，valueArr [i]]）;
}
//console.log(valueArr）;
//使用一个DataView将0的数据集中的所有值初始化为
var view = new google.visualization.DataView（data）;
var view_test = new google.visualization.DataView（data_test）;
//创建并绘制绘图
var chart = new google.visualization.LineChart（document.getElementById（'visualization'））;
var chart_test = new google.visualization.LineChart（document.getElementById（'visualization_test'））;
var options = {
title：，
width：960，
height：460，
bar：{groupWidth：40％ }，
legend：{position：bottom}，
animation：{startup：true}，
curveType：'function'，
lineWidth：3，
backgroundColor：'＃f9f9f9'，
颜色：['red']，
tooltip：{
textStyle：{
color：'red'，
italic ：true
}，
showColorCode：true
}，
动画：{
启动：true，
缓动：'inAndOut'，
//时长：500
}，
vAxis：{
title：''，
gridlines：{
count：8，
color：'＃ 999'
}
/ * minValue：1.3，
maxValue：1.4 * /
}，
hAxis：{
title：'时间戳'
}，
};
//留在套接字中
var runOnce = google.visualization.events.addListener（图表，'ready'，function（）{
google.visualization.events.removeListener runOnce）;
chart.draw（data，options）;
chart_test.draw（data，options）;
}）;
chart.draw（view，options）;
chart_test.draw（view_test，options）;
函数init（）{
try {
socket = new WebSocket（portal）;
//console.log('WebSocket status'+ socket.readyState）;
socket.onopen = function（msg）{
//console.log(\"Welcome - status+ this.readyState）;
};
socket.onmessage =函数（msg）{
parseData（msg）;
drawVisualization（）;
};
socket.onclose = function（msg）{
console.log（Disconnected - status+ this.readyState）;
};
}
catch（ex）{
console.log（ex）;
}
}
beginning只绘制一张图表，你可能会设置类似于下面的代码片段......
这个应该 前一个绘制已经完成... I have been doing lot research on this memory leak in Google charts library. Didnt found any thing thats helping my situation. Not sure whats the updates on this one so far. I saw google chart dev team is trying to fix it and release a new updates. I'm using line chart and the data is coming from websockets. which is constantly updating. Thanks in advance P.S below is the code I use to getting data from websockets. when the socket is connected the drawChart function is called every second. Meaning the whole line chart is redrawn
beginning with drawing only one chart, you might setup similar to following snippet... this should draw the same chart with new data, only after the previous draw has finished...
这篇关于谷歌折线图中的内存泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
pre $ 函数init（）{
var getData = true;
var chart = new google.visualization.LineChart（document.getElementById（'visualization'））;
google.visualization.events.addListener（chart，'ready'，function（）{
getData = true;
}）;
var options = {
title：，
width：960，
height：460，
bar：{groupWidth：40％ }，
legend：{position：bottom}，
animation：{startup：true}，
curveType：'function'，
lineWidth：3，
backgroundColor：'＃f9f9f9'，
颜色：['red']，
tooltip：{
textStyle：{
color：'red'，
italic ：true
}，
showColorCode：true
}，
动画：{
启动：true，
缓动：'inAndOut'，
//时长：500
}，
vAxis：{
title：''，
gridlines：{
count：8，
color：'＃ 999'
}
/ * minValue：1.3，
maxValue：1.4 * /
}，
hAxis：{
标题：'时间戳'
}，
};
//如果您想要以前绘图的数据，请在此处声明...
var data = new google.visualization.DataTable（）;
data.addColumn（'string'，'Time'）;
data.addColumn（'number'，'Value'）;
//或参见下面的内容...
// msg =带有parseData数组的对象
函数drawVisualization（msg）{
// if你**不需要**以前的绘制数据，在这里声明而不是...
var data = new google.visualization.DataTable（）;
data.addColumn（'string'，'Time'）;
data.addColumn（'number'，'Value'）;
// ---<
for（var i = 0; i< msg.valueArr.length; i ++）{
data.addRow（[msg.timeArr [i]，msg.valueArr [i]] ）;
}
chart.draw（data，options）;
}
函数parseData（msg）{
// ... declare timeArr& valueArr本地本地
返回{
timeArr：timeArr，
valueArr：valueArr
};
}
函数startData（）{
try {
socket = new WebSocket（portal）;
//console.log('WebSocket status'+ socket.readyState）;
socket.onopen = function（msg）{
//console.log(\"Welcome - status+ this.readyState）;
};
socket.onmessage =函数（msg）{
if（getData）{
getData = false;
//从parseData传递数组的对象
drawVisualization（parseData（msg））;
}
};
socket.onclose = function（msg）{
//console.log(\"Disconnected - status+ this.readyState）;
};
}
catch（ex）{
console.log（ex）;
}
}
startData（）;
}
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'data');
data.addColumn('number', 'date');
var data_test = new google.visualization.DataTable();
data_test.addColumn('string', 'data test');
data_test.addColumn('number', 'date test');
for(var i=0; i<valueArr.length; i+=2) {
if (i>=120) {
data.removeRow(0);
valueArr.splice(0, 2);
timeArr.splice(0, 2);
}
data.addRow([timeArr[i], valueArr[i]]);
}
for(var i=1; i<valueArr.length; i+=2) {
if (i>=120) {
data_test.removeRow(0);
valueArr.splice(0, 2);
timeArr.splice(0, 2);
}
data_test.addRow([timeArr[i], valueArr[i]]);
}
//console.log(valueArr);
// use a DataView to 0-out all the values in the data set for the initial draw
var view = new google.visualization.DataView(data);
var view_test = new google.visualization.DataView(data_test);
// Create and draw the plot
var chart = new google.visualization.LineChart(document.getElementById('visualization'));
var chart_test = new google.visualization.LineChart(document.getElementById('visualization_test'));
var options = {
title:" ",
width: 960,
height: 460,
bar: { groupWidth: "40%" },
legend: { position: "bottom" },
animation: {"startup": true},
curveType: 'function',
lineWidth: 3,
backgroundColor: '#f9f9f9',
colors: ['red'],
tooltip: {
textStyle: {
color: 'red',
italic: true
},
showColorCode: true
},
animation: {
startup: true,
easing: 'inAndOut',
//duration: 500
},
vAxis: {
title: '',
gridlines: {
count: 8,
color: '#999'
}
/*minValue: 1.3,
maxValue: 1.4*/
},
hAxis: {
title: 'Time Stamp'
},
};
//stay in sockets
var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
google.visualization.events.removeListener(runOnce);
chart.draw(data, options);
chart_test.draw(data, options);
});
chart.draw(view, options);
chart_test.draw(view_test, options);
}
function init() {
try {
socket = new WebSocket(portal);
//console.log('WebSocket status '+socket.readyState);
socket.onopen = function(msg) {
//console.log("Welcome - status "+this.readyState);
};
socket.onmessage = function(msg) {
parseData(msg);
drawVisualization();
};
socket.onclose = function(msg) {
console.log("Disconnected - status "+this.readyState);
};
}
catch(ex){
console.log(ex);
}
}
function init() {
var getData = true;
var chart = new google.visualization.LineChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'ready', function () {
getData = true;
});
var options = {
title:" ",
width: 960,
height: 460,
bar: { groupWidth: "40%" },
legend: { position: "bottom" },
animation: {"startup": true},
curveType: 'function',
lineWidth: 3,
backgroundColor: '#f9f9f9',
colors: ['red'],
tooltip: {
textStyle: {
color: 'red',
italic: true
},
showColorCode: true
},
animation: {
startup: true,
easing: 'inAndOut',
//duration: 500
},
vAxis: {
title: '',
gridlines: {
count: 8,
color: '#999'
}
/*minValue: 1.3,
maxValue: 1.4*/
},
hAxis: {
title: 'Time Stamp'
},
};
// if you want data from previous draws, declare here...
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time');
data.addColumn('number', 'Value');
// or see below...
// msg = object with arrays from parseData
function drawVisualization(msg) {
// if you ** don't ** want data from previous draws, declare here instead...
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time');
data.addColumn('number', 'Value');
// ---<
for (var i = 0; i < msg.valueArr.length; i++) {
data.addRow([msg.timeArr[i], msg.valueArr[i]]);
}
chart.draw(data, options);
}
function parseData(msg) {
//... declare timeArr & valueArr locally here
return {
timeArr: timeArr,
valueArr: valueArr
};
}
function startData() {
try {
socket = new WebSocket(portal);
//console.log('WebSocket status '+socket.readyState);
socket.onopen = function(msg) {
//console.log("Welcome - status "+this.readyState);
};
socket.onmessage = function(msg) {
if (getData) {
getData = false;
// pass object with arrays from parseData
drawVisualization(parseData(msg));
}
};
socket.onclose = function(msg) {
//console.log("Disconnected - status "+this.readyState);
};
}
catch(ex){
console.log(ex);
}
}
startData();
}
