如何解决在Web Worker中使用Chart.js
我正尝试使用Worker来使用Chart.js绘制图表,如Chart.js页面所述:
https://www.chartjs.org/docs/master/general/performance/
部分:与网络工作者并行渲染(仅适用于Chrome)
但是在worker.js
文件中出现错误:
Uncaught ReferenceError: Chart is not defined
我在worker.js
中有以下代码:
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();
};
解决方法
您需要在工作人员的脚本中导入库。
为此,您可以使用importScripts()
方法。
还要确保使用库的v.3,因为v2.x期望使用DOM HTMLElement,最后,似乎需要设置全局window
变量(将其设置为{{1} })中:
self
const worker_script = `
const window = self;
importScripts("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js");
onmessage = function(event) {
const {canvas,config} = event.data;
const chart = new Chart(canvas,config); // Error for Chart
canvas.width = 500;
canvas.height = 500;
chart.resize();
};
`;
const worker_url = URL.createObjectURL(new Blob([worker_script],{ type: "text/javascript" }));
const worker = new Worker(worker_url);
const canvas = document.getElementById("canvas").transferControlToOffscreen();
const config = { type:"line",data:{labels:["January","February","March","April","May","June","July"],datasets:[{label:"My First Dataset",data:[65,59,80,81,56,55,40],fill:false,borderColor:"rgb(75,192,192)",lineTension:0.1}]} };
worker.postMessage({ canvas,config },[canvas]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。