单击条时更改条颜色 plotly-react.js

Question

我已经使用plotly-react.js 实现了barchart。我想在单击栏以突出显示单击的栏时更改栏颜色。

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 中单击时突出显示该栏。您需要在数据对象中提供标记属性。

代码sn-p：

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 link