Image pointStyle 不会在初始图表渲染时加载？答案

【问题标题】：Image pointStyle doesn't load on initial chart render?Image pointStyle 不会在初始图表渲染时加载？
【发布时间】：2020-08-03 14:22:56
【问题描述】：

我想为散点图中的一个数据点加载图像。我遇到的问题是图像没有加载到初始页面/图表渲染上。图像仅在您单击/与图表交互时出现。我正在使用react-chartjs-2，任何建议都将不胜感激。

我尝试了以下（sn-p）

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 轴。它仅在图表实际宽度时隐藏

【问题讨论】：

标签： javascript charts chart.js react-chartjs react-chartjs-2

【解决方案1】：

如果您在组件constructor 中定义Image，它应该可以工作...

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

并在render 方法中创建Scatter 图表。

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

请看一下这个StackBlitz。

【讨论】：

谢谢。但我不想使用类。我正在使用 React Hooks 处理函数组件。