1

散布図のデータ ポイントの 1 つの画像を読み込みたいと考えています。私が抱えている問題は、最初のページ/チャートのレンダリングで画像が読み込まれないことです。画像は、グラフをクリックまたは操作したときにのみ表示されます。私は を使用してい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 軸から外れます。チャートの実際の幅にある場合にのみ非表示になります

4

1 に答える 1