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

Question

我希望小提琴图（我正在使用plotlyjs库）具有响应能力。但是也不要希望它压缩太多（它是根据保留的div压缩的）。我试图将小提琴的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还为其图表提供“保证金”属性。因此，提供边距将使您可以按自己的意愿调整图表]

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

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

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