Chart.js y轴标签被截断 [英] Chart.js y axis labels are truncated

问题描述

我有一个引导模态，里面有一个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> 
  

任何线索吗？

解决方案

只需添加以下内容：

 选项：{
布局：{
填充：{
 //任何未指定的尺寸都假定为0 
剩余：10，
底部：5 
} 
}，
  

这将解决此问题。

I have a bootstrap modal where I have a chart.js in it.

The problem is that left Y axis values are truncated.

This is the HTML in the inspector:

  <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;">Reading Details</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; overflow: hidden; pointer-events: none; visibility: hidden; 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>

Any clue?

解决方案

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轴标签被截断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！