Измените цвет панели, когда на панель нажимают plotly-реаги.js

Question

Я реализовал barchart, используя plotly-react.js.Я хотел бы изменить цвет панели при нажатии на панель, чтобы выделить панель, по которой щелкнули.

render() {

    return (
      <div>
        <Plot
          data={this.prepData(timelineData)}
          name='process duration'
          onClick={(data) => console.log('> Plotly click: ', data)}
          type= {'bar'}
          layout={{ width: '1130', height: 650, xaxis: {rangeslider: {}} }}
        />
      </div>
    );
}

prepData(timelineData) {
    var x=[];
    var y=[];

    timelineData.forEach(function(datum,i) {
      x.push(moment.unix(datum.endTime).format('DD MMM'));
      y.push(datum.duration);
    });
    return [{
      type: 'bar',
      x:x,
      y:y,
    }];
  }

Где мне нужно добавить логику для изменения цвета полосы при нажатии на эту конкретную полосу?

Answer 1

Да, вы можете получить подсветку панели при нажатии в plotlyjs.Необходимо указать атрибут маркера в объекте данных.

Фрагмент кода:

const Plot = createPlotlyComponent(Plotly);
const mountNode = document.getElementById("root")
colors =['#00000','#00000','#00000']

class PlotlyBarComponent extends React.Component {
  state = {
    colors: ['#00000','#00000','#00000'],
  }
  render() {
    return (
       <Plot
    data={[
        {
          type: "bar",
          x: [1, 2, 3],
          y: [2, 5, 3],
          marker:{size:16, color:this.state.colors}
        }
      ]}
      layout={{
        width: 640,
        height: 480,
        title: "A Fancy Plot"
      }}
    onClick={(data) => {
       console.log("data", data)
      var pn='',
      tn='',
      colors=[];
  for(var i=0; i < data.points.length; i++){
    pn = data.points[i].pointNumber;
    tn = data.points[i].curveNumber;
    colors = data.points[i].data.marker.color;
  };
  colors[pn] = '#C54C82';
  this.setState({
    colors: [...colors]
  })
    }}
   />
    )
  }
}
ReactDOM.render(
  <PlotlyBarComponent />,
     document.getElementById("root")
);

Ссылка Codepen