在 y 轴上显示太多数字

Posted 2023-02-18

【中文标题】在 y 轴上显示太多数字

【英文标题】：plotly displaying too many digits on y axis

【发布时间】：2022-01-08 04:55:15

【问题描述】：

我有噪声数据在 0 和 1 之间反弹。当值在 0 左右时，y 轴显示合理的 y 轴标签。但是，当值在 1 左右时，yaxis 标签太长，因为显示了太多数字并被页面上的其他内容截断。我创建了一个简单的代码笔来演示这里的问题：

https://codepen.io/mmakrzem/pen/ZEbBENK

const plotEl = document.getElementById('myDiv');

const numLines = 1;
const numDataPoints = 8;

const x = Array.from(  length: numDataPoints , ( _, i ) => i );

function getY( offset, num ) 
  return Array.from(  length: num , ( _, i ) => offset + Math.random() * 1e-10 );


const data = [ 
  
    x,
    y: getY( 0, numDataPoints ),
    xaxis: "x",
    yaxis: "y",
  
];

const layout = 
    width: 800,
    height: 500,
    showlegend: true,


Plotly.newPlot(plotEl, data, layout)

let t = numDataPoints;
const iHandle = setInterval( () => 
    t += 1;
    
  const offset = Math.floor( t / numDataPoints ) % 2;
  
    const update = 
        x: [[t]],
        y: [getY( offset, 1 )]
    ;  
    Plotly.extendTraces( plotEl, update, [ 0 ], 4 );
    
    if( t > 90 ) 
        clearInterval( iHandle );
    
, 1000 );

如何固定 y 轴标签，使其不显示这么多数字？

【参考方案1】：

你可以使用tickformat。

我在 yaxis 中添加了刻度格式。此代码最多只能显示在小数点以下三位。

Plotly 的 tickformat 遵循 d3.js 方法。

有关 tickformat 的更多信息，请参阅此链接。 d3.js tickformat

const layout = 
    width: 800,
    height: 500,
    showlegend: true,
    yaxis: 
      tickformat: '.3f',
    ,

【讨论】：

我已经更新了代码笔：codepen.io/mmakrzem/pen/ZEbBENK 但是当数字很大时仍然存在问题...注意现在我在 10M 左右波动，但 y 轴标签被切断