reactjs 如何增加Plotly图表上Y轴值的长度？

hfyxw5xn 于 2023-03-17 发布在 React

关注(0)|答案(1)|浏览(152)

我正在尝试在ReactJS中实现一个水平条形图。下面是代码。在Y轴上我有长度为44的文本（长颈鹿_长颈鹿_长颈鹿_长颈鹿_长颈鹿_长颈鹿）。在图表上我只能看到14个字符。如何增加这里的长度以查看图表上的所有字符？

var trace1 = {
  y: ['giraffes_giraffes_giraffes_giraffes_giraffes', 'orangutans', 'monkeys'],
  x: [20, 14, 23],
  name: 'SF Zoo',
  orientation: 'h',
  type: 'bar'
};

var trace2 = {
  y: ['giraffes_giraffes_giraffes_giraffes_giraffes', 'orangutans', 'monkeys'],
  x: [12, 18, 29],
  name: 'LA Zoo',
  orientation: 'h',
  type: 'bar'
};

var data = [trace1, trace2];

var layout = {barmode: 'stack'};

Plotly.newPlot('myDiv', data, layout);

我正在获取的图表.

reactjs

来源：https://stackoverflow.com/questions/75741297/how-to-increase-the-length-of-y-axis-values-on-plotly-chart

1条答案

按热度按时间

noj0wjuj1#

您必须将layout.yaxis.automargin设置为true或"left"，请参阅yaxis.automargin上的文档。

var trace1 = {
    y: ['giraffes_giraffes_giraffes_giraffes_giraffes', 'orangutans', 'monkeys'],
    x: [20, 14, 23],
    name: 'SF Zoo',
    orientation: 'h',
    type: 'bar'
};

var trace2 = {
    y: ['giraffes_giraffes_giraffes_giraffes_giraffes', 'orangutans', 'monkeys'],
    x: [12, 18, 29],
    name: 'LA Zoo',
    orientation: 'h',
    type: 'bar'
};

var data = [trace1, trace2];

var layout = {
    barmode: 'stack',
    yaxis: {automargin: true},
};

Plotly.newPlot('myDiv', data, layout);

<head>
    <script src="https://cdn.plot.ly/plotly-2.18.2.min.js"></script>
</head>
<style>
</style>

<body>
<div id="myDiv" style="width:600px;height:250px;border:1px solid gray"></div>

</body>

赞(0）回复(0）举报 2023-03-17

我来回答

reactjs 如何增加Plotly图表上Y轴值的长度？

1条答案

相关问题

热门标签

最新问答