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 link

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

1 个答案: