Как правильно связать событие Highcharts в функциональном компоненте React? - PullRequest
Новая
       7

Как правильно связать событие Highcharts в функциональном компоненте React?

0 голосов
/ 16 января 2020

Я использую старшие диаграммы в реакции с старшей диаграммой реакции: demo Я определил опцию диаграммы в другом файле и импортировал ее как состояние 

import * as options from "./chartConfig";
const [option, setOption] = useState(options.option_bubble);

, а теперь изменил опцию в useEffect почему я должен делать это в компоненте реагирования, потому что мне нужно делать другие вещи, такие как выборка данных, поэтому я не могу просто определить это в chartConfig. js.

Теперь мой код выглядит так: 

export default function HighChart(props) {
  const [state1, setState1] = useState("button");
  const [option, setOption] = useState(options.option_bubble);
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  const clickChart = event => {
    console.log("event", event.point);
  };


  useEffect(() => {
    console.log("useEffect");

     option.plotOptions.series.point.events.click = clickChart;
     let NewOptoin = Object.assign({}, option);
     setOption(NewOptoin);
     setRefreshTrigger(Math.random);
  },[props]);

, поэтому я хочу связать рендер () внутри компонента реакции. в чистом js это выглядит так: 

console.log(Highcharts.chart);
Highcharts.chart('container', {
 chart: {
    type: "bubble",
    plotBorderWidth: 1,
    events: {
        render() {
        let chart = this;

        chart.series[0].points.forEach(p => {
                    let labelWidth = p.marker.width,
                dataLabel = p.dataLabel,
              padding = 2;

             dataLabel.css({
                    width: labelWidth
             })
            if (isFirstRender){
           ÏdataLabel.translate(dataLabel.alignAttr.x + dataLabel.getBBox().width / 2 - padding, dataLabel.alignAttr.y)
isFirstRender = false;
            }   
        })
      }
    }
  },

, так что же такое функция рендеринга в объекте событий, почему она не выглядит так: 

events:{
render:function(){
 }
}

и как я могу -определить в реакции?

...