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

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

0 голосов
/ 03 августа 2020

Я хочу загрузить изображение для одной из точек данных в точечной диаграмме. У меня проблема в том, что изображение не загружается на начальном рендере страницы / диаграммы. Изображение появляется только при нажатии на диаграмму или при взаимодействии с ней. Я использую 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. Скрывается только тогда, когда на графике фактическая ширина

1 Ответ

1 голос
/ 09 августа 2020

Он должен работать, если вы определите 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 .

...