Chart.js 为比例添加填充 [英] Chart.js add padding to scales

问题描述

我需要在 x 和 y 轴上添加填充.这个问题(How to add padding betweenchart.js 中的图形和 X/Y 比例?)是我的确切情况，只有我使用的是 Chart.js 2.

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

基本上我的观点是大图，所以它们超出了图表范围.有没有办法为图表区域或比例添加填充以使其更适合?

解决方案

想出了一个使用 yAxes 的方法:

选项:{秤:{y轴:[{滴答声:{填充:100}}],}}

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

yAxes: [{滴答声:{分钟:-100}}],

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

更新 #1:X 轴建议

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

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

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.

See screeshot: 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?

解决方案

Figured out a way to do it with the 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:

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

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

Update #1: X-axis suggestion

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

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

这篇关于Chart.js 为比例添加填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！