Image pointStyle не загружается при начальном рендеринге диаграммы?

Question

Я хочу загрузить изображение для одной из точек данных на точечной диаграмме. У меня проблема в том, что изображение не загружается на начальном рендере страницы / диаграммы. Изображение появляется только при нажатии на диаграмму / взаимодействии с ней. Я используюreact-chartjs-2, Мы ценим любые предложения.

Я пробовал следующее (фрагмент)

import { Scatter, Chart } from "react-chartjs-2";

const chartReference = useRef();
const myImage = new Image(25, 35); 
myImage.src = '/img/myimage.svg';
  
const chartData = {
    datasets: [{
        label: 'my Image',
        data: [{ x: dummyData, y: 25 }],
        pointStyle: myImage,
        radius: 1,
        pointRadius: 10,
        borderWidth: 0,
        type: 'line',
    }],
}

 return (
    <Scatter
        height={height}
        width={width}
        data={chartData}
        options={options}
        plugins={[Zoom]}
        ref={chartReference}
        redraw={true} 
    />
       

Я тоже прошел через это, но где мне это разместить?

chartReference.current.chartInstance.data.datasets[0].pointStyle = myImage; 
chartReference.current.chartInstance.update();

Если вам удастся решить эту проблему, я хотел бы задать вопрос из части 2: когда вы панорамируете диаграмму, в отличие от встроенной data pointStyleизображение уходит за ось y. Он скрывается только тогда, когда на графике отображается фактическая ширина

Answer 1

Он должен работать, если вы определите Image внутри компонента constructor...

constructor() {
  super();
  const myImage = new Image(25, 35);
  myImage.src = "/img/myimage.svg";

и создать Scatter диаграмма внутри render метод.

render() {
  return (
    <div>
      <Scatter
        data={this.state.chartData }
        options={this.state.chartOptions}
        ...
      />
    </div>
  );
}

Пожалуйста, взгляните на этот StackBlitz.