Chart.js折线图在顶部被截断？

Question

对于一些reasone,所有图表都以最高值被截断.我怎样才能解决这个问题？我不能使用固定的y轴

Answer 1

您可以尝试clip:false选项，对我有用。

例子：

options: {
    clip: false,
    responsive: true,
    interaction: {
      intersect: false,
      mode: 'index',
    }
 }

Answer 2

编辑/更新:正如评论中所提到的,5px值可以更精确地只是你的线宽值的一半,我相信默认是2px所以在这种情况下你只需要填充:{top:1}

您可以在options或global中设置layout.padding属性.我有同样的问题和设置

options: {
  layout: {
    padding: {
      top: 5
    }
  },
  ...
}

我工作得很好,没有切断线 http://www.chartjs.org/docs/#chart-configuration-layout-configuration

Answer 3

我使用了硬编码，只是顶部和底部的宽绘制区域。此代码基于原始Chart.canvasHelpers.clipArea。

const WIDE_CLIP = {top: 2, bottom: 4};

Chart.canvasHelpers.clipArea = function(ctx, clipArea) {
    ctx.save();
    ctx.beginPath();
    ctx.rect(
      clipArea.left,
      clipArea.top - WIDE_CLIP.top,
      clipArea.right - clipArea.left,
      clipArea.bottom - clipArea.top + WIDE_CLIP.bottom
    );
    ctx.clip();
};

Answer 4

我在制作线图时发现了这一点，图例显示在顶部。我发现的唯一解决方法是将图例移至底部

options: {
    legend: {
       position: 'bottom',
    },
}

小提琴