Chart.js版本3：如何容许刻度标签溢出？

wsxa1bj1 于 2022-11-07 发布在 Chart.js

关注(0)|答案(2)|浏览(227)

我最近从Chart.jsv2升级到了v3。我正在绘制实时折线图，它带有一个基于时间的x轴，随着时间的推移而滚动。
在Chart.js v3中，当我的X轴刻度标签开始接近图表的左边缘时，它会调整图形的大小以适合整个标签。如所附图像所示，这会在图表的左侧创建一个空白间隙。在Chart.js v2中，它不会调整图形的大小，而是允许标签溢出画布。

我的X轴选项包括：

{
  type: 'time',
  axis: 'x',
  min: minDate.getTime(),
  max: maxDate.getTime()
  time: {},
  ticks: {
    minRotation: 45,
    maxRotation: 45,
    source: 'labels'
  }
};

是否有任何选项可以恢复旧的行为并允许刻度标签溢出？

chart.js

来源：https://stackoverflow.com/questions/69006050/chart-js-v3-how-to-allow-tick-label-overflow

2条答案

按热度按时间

a7qyws3x1#

您可以使用ticks将第一个tick格式化为空字符串。callback

{
  type: 'time',
  ticks: {
    callback: (value, index) => index === 0 ? '' : value
  }
}

example in codepen

赞(0）回复(0）举报 2022-11-07

3zwjbxry2#

我最终能够使用afterFit回调获得所需的行为。

{
  type: 'time',
  afterFit: (scaleInstance) => {
    scaleInstance.paddingLeft = 0;
    scaleInstance.paddingRight = 0;
  }
}

赞(0）回复(0）举报 2022-11-07

我来回答

Chart.js版本3：如何容许刻度标签溢出？

2条答案

相关问题

热门标签

最新问答