Chart.js y轴标签被截断

问题描述

我有一个引导模态，里面有一个chart.js。

问题是左Y轴的值被截断了。

这是检查器中的HTML：

 < div class = modal-dialog modal-center> 
< div class = modal-content> 
< div class = modal-header style = background-color：＃62a8ea;> 
< button type = button class = close data-dismiss = modal aria-label = Close> 
< span aria-hidden = true>×< / span> 
< / button> 
< h4 class = modal-title style = color：white;>阅读详细信息< / h4> 
< / div> 
< div class = modal-body style = height：400px;>< div>< div class = chartjs-size-monitor style = position：absolute; left：0px ; top：0px; right：0px; bottom：0px;溢出：隐藏;指针事件：无;可见性：隐藏; z-index：-1;>< div class = chartjs-size-monitor-expand  style = position：absolute; left：0; top：0; right：0; bottom：0; overflow：hidden; pointer-events：none; visibility：hidden; z-index：-1;>< div style = position：absolute; width：1000000px; height：1000000px; left：0; top：0>< / div>< / div>< div class = chartjs-size-monitor-shrink style = position：absolute; left：0; top：0; right：0; bottom：0; overflow：hidden; pointer-events：none; visibility：hidden; z-index：-1;>< div style = position：absolute; width：200％; height：200％; left：0; top：0< / div>< / div>< / div> 
< canvas id = detail-chart width = 560 height = 280 class = chartjs-render-monitor style = display：block; width：560px; height：280px;> ;< / canvas> 
< / div> 
< / div> 
< div class = modal-footer> 
 
< / div> 
< / div> 
< / div> 
  

解决方案

Just add the following:

options: {
                                layout: {
                                    padding: {
                                        // Any unspecified dimensions are assumed to be 0
                                        left: 10,
                                        bottom: 5
                                    }
                                },

That will fix the problem.

这篇关于Chart.js y轴标签被截断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！