[英]Issues with web worker Implementation in Echartjs "Failed to execute 'postMessage' on 'Worker': Value at index 0 does not have a transferable type."
can anyone help me to implement a web worker?谁能帮我实现一个 web 工人?
Main Code:主要代码:
dataset = "dataset" + document.getElementById("dataset").value
const config = {
xAxis: {
type: 'category',
data: Object.keys(window[dataset])
},
yAxis: {
type: 'value'
},
series: [
{
data: Object.values(window[dataset]),
type: 'line'
}
]
};
const worker1 = new Worker('worker/echarts1.worker.js');
const canvasEl = document.getElementById("offscreenCanvas1");
console.log(canvasEl);
const offscreenCanvas = canvasEl.transferControlToOffscreen();
worker1.postMessage({ canvas: offscreenCanvas, config }, [offscreenCanvas]);
Web Worker (echarts1.worker.js) Web 工人(echarts1.worker.js)
importScripts('https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.js');
onmessage = function (event) {
console.log("Started Worker");
const { canvas, config } = event.data;
const chart = new echarts.init(canvas);
chart.setOption(config);
console.log("Finished Worker");
};
While Executing I'm facing the below error in the console.执行时,我在控制台中遇到以下错误。
You are transferring a (possible) HTMLCanvasElement ( <canvas>
), not an OffscreenCanvas.您正在传输(可能的)HTMLCanvasElement ( <canvas>
),而不是 OffscreenCanvas。
To get the OffscreenCanvas out of that HTMLCanvasElement, you need to call its .transferControlToOffscreen()
method:要从 HTMLCanvasElement 中获取 OffscreenCanvas,您需要调用其.transferControlToOffscreen()
方法:
const canvasEl = document.getElementById("chart-container1");
const offscreenCanvas = canvasEl.transferControlToOffscreen();
const worker1 = new Worker('echarts1.worker.js');
worker1.postMessage({ canvas: offscreenCanvas, config }, [offscreenCanvas]);
(If the element with an id ""chart-container1"
isn't a <canvas>
, then you need to target one instead.) (如果 id 为""chart-container1"
的元素不是<canvas>
,那么您需要改为定位一个。)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.