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

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。

于 2020-08-09T06:10:15.950 回答