Question

我使用react-plotly.js创建了带有rangelider的条形图。我想启用库提供的图表区域上的拖动和缩放功能。但是该功能对我不起作用。布局的fixedRange属性不正确。光标变为双箭头光标，但是当我执行拖动操作时，什么也没有发生。所选区域未突出显示，甚至没有放大。但是当我双击时，该区域将缩小。我的布局设置如下：

const layout = {
        title: this.state.chartTitle,
        autosize: true,
        dragmode: false,
        // showlegend: true,
        margin: {
          r: 0,
          t: 50,
          b: 100,
          pad: 0,
          autoexpand: true
        },
        scrollZoom: true,
        hoverlabel: {
          bgcolor: 'rgba(0,0,0,1)',
          bordercolor: 'rgba(200,200,200,1)'
        },
        width: this.state.layoutWidth,
        height: '750',
        yaxis: {
          title: this.state.yaxisTitle,
          type: 'linear',
          showgrid: true
        },
        xaxis: {
          title: this.props.intl.formatMessage(messages.xAxisTitle),
          type: this.state.xaxisType,
          autorange: false,
          showgrid: false,
          range: this.state.axisRange,
          rangeslider: {
            visible: true,
            range: this.state.sliderRange
          }
        }

我什至尝试了scrollZoom属性，但这也不起作用。我正在使用的plotly.js和react-plotly.js的版本是：

"plotly.js": "^1.41.3",
"react-plotly.js": "^2.2.0",
 "react-plotlyjs": "^0.4.4",

我想还要添加一些CSS设置吗？请帮忙。

Answer 1

代替放 scrollZoom: true进行布局，请尝试将其放入配置树，例如：

const Plot = createPlotlyComponent(Plotly);

ReactDOM.render(
  React.createElement(Plot, {
    data: [...],
    layout: {...}, 
    config: {
      scrollZoom: true,
    }
  }),
  document.getElementById('root')
);

放大图表在react-plotly.js中不起作用

1 个答案: