Использование Chart.js в Web Worker

#javascript #chart.js #web-worker

Вопрос:

Я пытаюсь использовать Worker для рисования диаграммы с помощью Chart.js , как упоминалось на Chart.js страница:
https://www.chartjs.org/docs/master/general/performance/
Раздел: Параллельный рендеринг с Web workers (только для 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();
};

1. Предоставляете ли вы автономный объект canvas при отправке события в соответствии с документами?

2. Да, я отправляю автономный холст в web worker. Поскольку я хочу одновременно обрабатывать parellel на нескольких графиках.

Ответ №1:

Вам необходимо импортировать библиотеку в скрипт вашего worker.

Для этого вы можете использовать importScripts() метод.

Также обязательно используйте версию 3 библиотеки, поскольку версия v2.x ожидала появления DOM HTMLElement, и, наконец, кажется, вам нужно установить глобальную window переменную (установите ее в self ) в вашем Worker:

 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]);

 <canvas id="canvas"></canvas>