javascript - 调整大小并使 PotlyJS 的 fiddle 图表响应

Question

我希望 fiddle 图表(我正在使用 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%"}}
      />

fiddle 所在的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 .