Question

我正在使用highcharts库为一些PC主机构建实时可视化工具。使用websocket，Web应用程序接收数据并更新图表（每个Web应用程序11个图表，每个主机）。 javascript代码位于一个文件中，导致浏览器在某个时刻冻结，或者只是相当长的延迟。

谷歌搜索后，我读到了关于网络工作者，并想到尝试优化。所以我想出了02个javascript文件：

第一个（主线程）初始化UI和图表等...
第二个（ worker ）应该听websocket，并更新图表。

由于图表是在主线程中创建的（因为我可以访问DOM并选择图表的容器），当我尝试将图表传输给worker时，我得到DATA_CLONE_ERR错误，如下所示：

DataCloneError: The object could not be cloned.

以下是触发代码的脚本部分，正好在postmessage（）部分：

var charts_list = []; //charts    
function initAllCharts(host_i, l_id, pos){
var chart_i;
for (var i = 0; i < 11; i++) {
  if (i < 4){
    chart_i = new Highcharts.Chart({
      chart: {
        renderTo: l_id + '_graph'+i,
        defaultSeriesType: 'spline',
        zoomType: 'xy',
        panning: true,
        panKey: 'shift'                                    
      },
      title: {
        text: ''
      },
      legend: {
        enabled: true
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      plotOptions: {
        spline: {
          marker: {
            enabled: false
          }
        }
      },
      tooltip: {
        valueDecimals: 2,
      },
      xAxis: {
        title: {
          text: ''
        },
        type: 'datetime',
        tickPixelInterval: 150,
        maxZoom: 20 * 1000
      },
      yAxis: {
        title: {
          text: ''
        },
        minPadding: 0.2,
        maxPadding: 0.2,
      },
      series: [{
        name: 'Random data',
        data: []
      }]
    });
  }else{
    chart_i = new Highcharts.Chart({
      chart: {
        renderTo: l_id + '_histogram'+i,
        type: 'column',   
        zoomType: 'xy',
        panning: true,
        panKey: 'shift'
      },
      title: {
        text: '',
      },
      subtitle: {
        text: '',
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      tooltip: {},
      plotOptions: {
        series: {
          pointPadding: 0,
          groupPadding: 0,
          borderWidth: 0.5,
        }
      },
      xAxis: {
        title: {
          text: ''
        }
      },
      yAxis: {
        title: {
          text: ''
        }
      },
      series: [{
        name: 'Random Data',
        data: []
      }],
    });
  }
  charts_list.push(chart_i);
  chart_i = {};
}
//Post to worker
toChartsWorker = {"charts_list":charts_list};
chartsDataWorker.postMessage(toChartsWorker);

return chart_i;

}

到目前为止，这是我唯一的方法。你能帮帮我吗？你看到了另一种做法吗？

将highcharts对象传递给Web worker

0 个答案: