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

对于某些reasone，所有图都以最高值截断。我该如何解决这个问题？我不能使用一个固定的y-轴Chart.js折线图在顶部被截断？

2016-06-08 nourdin

你有小提琴：

另一种解决方法是在这个bug票的评论1描述？ – phreakv6

你用什么来创建图表？你试图解决什么问题？请创建一个片段（在这里解释https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）以显示您的代码。 –

@nourdin你有没有得到一个解决这个？我也遇到了它。 –

我发现这个同时使线图形，具有在顶部显示的图例。唯一的解决办法我发现了传说移至底部

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

fiddle

来源

2016-06-08 15:07:12 Quince

编辑/更新：正如评论所说，5px的值可以更准确地只是什么的一半您线宽值是，我相信默认是2px，所以在这种情况下，你只需要填充：{top：1}

有一个layout.padding属性，你可以在options或global中设置。我有同样的问题，并设置

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

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

来源

2016-12-20 10:10:22 sean6bucks

是的，这对我很有用。我已经切断了极地面积图的问题，填充画布没有做任何事情。填充布局，因为您在此处声明已解决问题。接得好！ – wrkyle

这没有帮助，它只是将整个图形向下推动5px。 – RocketR

@RocketR我想更清楚一点，默认线宽是2（px），但它将线放在中间，所以如果你的图表达到100％，那么1px就会被截断。所以也许更准确的解决方案是顶部=你的borderWidth值的一半; – sean6bucks

我使用硬编码，在顶部和底部稍稍偏出绘制区域。此代码基于原始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(); 
};

来源

2017-09-19 14:54:26

我也遇到了这个Chart.js错误。

最近的修复程序显示为here。你不得不手动编辑chart.js之文件src/controllers/controller.line.js （角度2，此文件路径将位于目录里面node_modules/chart.js/。）

或者只是等待下一次chart.js之版本将很可能含有修复。 https://github.com/chartjs/Chart.js/issues/4202

来源

2017-11-15 11:18:16 holg3r

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

回答

相关问题