如何调整Plotly图表中刻度标签（tick labels）的大小

实现逻辑 #

• 用数字输入框接收用户设置的标签大小值
• 监听输入框的input事件，实时获取输入数值
• 调用Plotly.restyle方法同步更新X轴与Y轴的刻度字体大小

HTML代码 #

<head>
    <!-- 加载Plotly.js库 -->
    <script src='https://cdn.plot.ly/plotly-2.24.1.min.js'></script>
</head>

<body>
  <input type="number" id="LabelSizeInput" placeholder="输入标签大小" />
    <div id='myDiv'><!-- Plotly图表将渲染在此容器中 --></div>
</body>

JavaScript代码 #

// 生成高斯分布随机数的函数
function gaussianRand() {
  var rand = 0;
  for (var i = 0; i < 6; i += 1) {
    rand += Math.random();
  }
  return (rand / 6) - 0.5;
}

var X = [],
  Y = [],
  n = 100000,
  i;

// 生成两组高斯分布数据
for (i = 0; i < n; i += 1) {
  X.push(gaussianRand());
  Y.push(gaussianRand());
}

// 定义图表数据
var data = [{
  type: "scattergl",
  mode: "markers",
  marker: {
    line: {
      width: 1,
      color: '#404040'
    }
  },
  x: X,
  y: Y
}];

// 初始布局设置，默认刻度标签大小为12
var layout = {
  xaxis: {
    tickfont: {
      size: 12 // 设置X轴刻度值的初始大小
    }
  },
  yaxis: {
    tickfont: {
      size: 12 // 设置Y轴刻度值的初始大小
    }
  }
};

// 渲染初始图表
Plotly.newPlot('myDiv', data, layout);

// 获取输入框元素并监听输入事件
var inputElement = document.getElementById('LabelSizeInput');
inputElement.addEventListener('input', function() {
  var label_size = parseInt(inputElement.value);
  // 确保输入为有效数字
  if (!isNaN(label_size)) {
    Plotly.restyle('myDiv', {
      'xaxis.tickfont.size': label_size,
      'yaxis.tickfont.size': label_size,
    });
  }
});

内容的提问来源于stack exchange，提问作者Rohit Chakraborty