Javascript 在Web Worker中使用Chart.js

我正在尝试使用Worker使用Chart.js绘制图表，如Chart.js页面所述： 部分：仅使用web workers Chrome进行并行渲染

但是在worker.js文件中，我得到一个错误：

Uncaught ReferenceError: Chart is not defined

我在worker.js中有以下代码：

---

您需要在工作人员的脚本中导入库

为此，您可以使用以下方法

还要确保使用库的v.3，因为v2.x需要一个DOM HTMLElement，最后，似乎需要在Worker中设置一个全局窗口变量，将其设置为self：

const worker_脚本=` 常数窗口=自身； 进口iptshttps://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js; onmessage=functionevent{ const{canvas，config}=event.data； const chart=new Chartcanvas，config；//图表错误 画布宽度=500； 高度=500； chart.resize； }; `; const worker_url=url.createObjectURLnew Blob[worker_script]，{type:text/javascript}； const worker=新worker\u url； const canvas=document.getElementByIdcanvas.transferControlToOffscreen； const config={type:line，data:{labels:[一月、二月、三月、四月、五月、六月、七月]，数据集：[{label:My-First-Dataset，data:[65,59,80,81,56,55,40]，fill:false，borderColor:rgb75,192,192，lineTension:0.1}}； worker.postMessage{canvas，config}，[canvas]；

---

您需要在工作人员的脚本中导入库

为此，您可以使用以下方法

还要确保使用库的v.3，因为v2.x需要一个DOM HTMLElement，最后，似乎需要在Worker中设置一个全局窗口变量，将其设置为self：

const worker_脚本=` 常数窗口=自身； 进口iptshttps://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js; onmessage=functionevent{ const{canvas，config}=event.data； const chart=new Chartcanvas，config；//图表错误 画布宽度=500； 高度=500； chart.resize； }; `; const worker_url=url.createObjectURLnew Blob[worker_script]，{type:text/javascript}； const worker=新worker\u url； const canvas=document.getElementByIdcanvas.transferControlToOffscreen； const config={type:line，data:{labels:[一月、二月、三月、四月、五月、六月、七月]，数据集：[{label:My-First-Dataset，data:[65,59,80,81,56,55,40]，fill:false，borderColor:rgb75,192,192，lineTension:0.1}}； worker.postMessage{canvas，config}，[canvas]；

---

您是否在根据文档发送事件时提供了脱机画布对象？是的，我正在将脱机画布发送给web worker。因为我想同时对多个图表进行并行处理。在根据文档分派事件时，您是否提供脱机画布对象？是的，我正在将脱机画布发送给web worker。因为我想同时对多个图表进行并行处理。谢谢。无法导入Chart.js，但获取错误Chart.min.js-未捕获类型错误：未能在“OffscreenCanvas”上设置“width”属性：值不是“unsigned long”类型。谢谢。无法导入Chart.js，但获取错误Chart.min.js-未捕获类型错误：未能在“OffscreenCanvas”上设置“width”属性：值不是“unsigned long”类型。

onmessage = function(event) {
    const {canvas, config} = event.data;
    const chart = new Chart(canvas, config); // Error for Chart 

    canvas.width = 100;
    canvas.height = 100;
    chart.resize();
};