Question

我已经使用react-plotly.js实现了带有rangelider的条形图。我根据日期格式给出的输入设置滑块的初始范围。我还在barchart上实现了onClick事件，它将选择一个特定的条并在单击时更改颜色。

除此之外，我还想设置Rangeslider来选择单击条的区域。当前，如您在上图中所看到的，每次执行onClick事件时，rangeslider会将其自身设置回初始范围值。因此，为了查看被单击的栏，我必须手动将滑块移动到该区域。

xaxis: {

       type: 'date',
       autorange: false,
       fixedrange: true, 
       showgrid: false,
       range: [moment.unix(this.state.startTime).format('YYYY-MM-DD'), moment.unix(this.state.endTime).format('YYYY-MM-DD')],
      rangeslider: {
             visible: true
        }
     }
<Plot
     data={this.prepData(this.state.chartData)}
     onClick={(data) => {
               var colors = [];
               var clickedPoint = data.points[0].pointNumber;
               for (var i = 0; i < data.points[0].data.y.length; i++) {
                    if (i === clickedPoint) {
                        colors[i] = '#9b1e83';
                    } else {
                        colors[i] = this.state.defaultColor[i];
                    }
             }

            this.setState({
                currentColorsArray: colors,
                barClicked: data.points[0].pointNumber,
                showSummaryPanel: true
            }) 

         }}
         onHover={(hover) => this.getHoverInfo(hover)}
         type={'bar'}
  />

我应该如何将值传递给onRelayout，以便将rangelider设置为执行onClick事件的区域？

更新onClick事件plotly.js的rangeslider范围

0 个答案: