调整大小并使 PotlyJS 的小提琴图表响应

Question

我希望小提琴图表（我正在使用 plotlyjs 库）能够响应。但也不希望它压缩太多（它根据保存的 div 进行压缩）。我试图将 violin 的 autosize 属性设置为 false，然后设置高度和宽度。在这种情况下，图表不会压缩（保持我想要的方式），但它会失去响应能力。有没有办法让这个图表响应但不那么压缩？这是我的代码：

<Plot
        config = {{ displayModeBar: false }}
        data={[
          {
            type: 'violin',
            y: this.props.data,
            points: 'none',
            box: {
              visible: true
            },
            boxpoints: false,
            line: {
              color: 'red'
            },
           opacity: 0.6,
            meanline: {
              visible: true
            },
            x0: "OEE"
          }
        ]}
        layout={{
          title: "Comparison",
          yaxis: {
          zeroline: false
              },
              // autosize: false,
          // height: 300,
          // width: 500,
          // responsive: true
        }}
        useResizeHandler= {true}
        style= {{width: "100%", height: "100%"}}
      />

放小提琴的div：

<div className="chart-wrapper" style={{ height: "35vh" }}>
   <ViolinChart data={this.state.violinChartData} /> 
</div>

Answer 1

我找到了上述问题的答案。 PlotlyJS 还为其图表提供了 "margin" 属性。因此，提供边距可以让您按照自己想要的方式调整图表

var layout = {
  margin: {
    l: 25,
    r: 25,
    b: 25,
    t: 25
  }
};

这是我添加到代码中的内容。设置 automargin = true 将自动增加边距大小。

有关此内容的更多信息，请参见 here。

调整大小并使 PotlyJS 的小提琴图表响应

To resize and make the Violin chart of PotlyJS responsive

javascript

responsive-design

reactjs

plotly

violin-plot