Question

我需要在plotly js热图中使用大标签。大约需要9到11个字符。我尝试增加它正在使用的不同svg元素的宽度。

在下面的代码笔中用y替换y轴内容 y：[＆＃39;早上我的文字＆＃39;，＆＃39;下午我的文字＆＃39;，＆＃39;晚上我的文字＆＃39;]，

https://codepen.io/plotly/pen/4cff7f15035142f88f62c9a4700c1d70

结果显示了我的文字＆＃34; 。 Morn被隐藏了。

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>

  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>


var data = [
  {
    z: [[1, 20, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],
    x: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    y: ['Morning My Text', 'Afternoon  My Text', 'Evening  My Text'],
    type: 'heatmap'
  }
];

Plotly.newPlot('myDiv', data);

Answer 1

您可以将第二个参数传递给包含布局信息的Plotly.newPlot。例如：Plotly.newPlot('myDiv', data, {yaxis: {automargin: true}});将拉伸绘图边距以适合Y轴标签。

请参阅https://plot.ly/javascript/plotlyjs-function-reference/和https://plot.ly/javascript/reference

Answer 2

您可以动态设置边距长度。

var maxLabelLength = 20;
const letterWidth = 7;
var layout = {
  title: 'Bar Chart',
  margin:{
    l: maxLabelLength * letterWidth
  }
};

增加Y轴标签长度

2 个答案: