散布図のデータ ポイントの 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 軸から外れます。チャートの実際の幅にある場合にのみ非表示になります