我希望 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>
最佳答案
我得到了上述问题的解决方案。 PlotlyJS 还为其图表提供了一个“边距”属性。因此,提供边距可以让您按照自己想要的方式调整图表
var layout = {
margin: {
l: 25,
r: 25,
b: 25,
t: 25
}
};
这是我添加到我的代码中的内容。设置 automargin = true 将自动增加边距大小。
有关此的更多信息,请参见 here .
https://stackoverflow.com/questions/61095002/
相关文章:
javascript - react 导航和状态栏颜色在 View 更改时闪烁
c# - IOptions 验证不会触发,直到我在 Asp.Net Core 3 中显式调用具有属性
python - 带有 GEKKO 的轨迹规划器无法处理给定的目标速度
javascript - 本地加载keras模型到tensorflow.js
node.js - Angular 9 Node.js AWS - 从 'aws-sdk' 添加导入
python - 没有 Conda 的 Conda environment.yml
google-cloud-platform - GCP Bigquery 通过 Terraform
angular - 接口(interface)对象属性未定义,但有 Angular 值