Javascript Chart.js 向比例添加填充

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/37985154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 20:56:16  来源:igfitidea点击:

Chart.js add padding to scales

javascriptchartschart.js

提问by Joe

I need to add padding on the x and y axis. This question (How to add padding between Graph and X/Y-Scale in chart.js?) is my exact situation, only I am using Chart.js 2.

我需要在 x 和 y 轴上添加填充。这个问题(How to add padding between Graph and X/Y-Scale in chart.js?)是我的确切情况,只有我使用的是Chart.js 2。

See screeshot: http://i.imgur.com/2BvlZDg.png

见截图:http://i.imgur.com/2BvlZDg.png

Basically my points are large images, so they are running off the chart. Is there a way to add padding to the chart area or scales so they fit better?

基本上我的观点是大图像,所以它们在图表之外。有没有办法向图表区域或比例添加填充以使其更适合?

回答by Tom Glover

Figured out a way to do it with the yAxes:

想出一种方法来用 yAxes 做到这一点:

options: {
    scales: {
        yAxes: [{
            ticks: {
                padding: 100
            }
        }], 
    }
}

No solution so far on the x axis. A workaround to your problem though could be to set a lower min by calculating the min of the data and adding subtracting a increment value:

到目前为止在 x 轴上没有解决方案。您的问题的解决方法可能是通过计算数据的最小值并添加减去增量值来设置较低的最小值:

yAxes: [{
    ticks: {
        min: -100
    }
}], 

Both togheter would be something like this: https://jsfiddle.net/u9b0nmp8/1/

两者都将是这样的:https://jsfiddle.net/u9b0nmp8/1/

Update #1: X-axis suggestion

更新 #1:X 轴建议

Update #2: improved alternative to the x-Axis based on https://stackoverflow.com/a/38620312/6638478

更新 #2:基于https://stackoverflow.com/a/38620312/6638478的 x 轴的改进替代方案

Update #3: version 2.7 and up now supports padding on both y and x axis. Example: https://jsfiddle.net/u9b0nmp8/207/

更新 #3:2.7 及更高版本现在支持在 y 和 x 轴上填充。示例:https: //jsfiddle.net/u9b0nmp8/207/