Chart.js y 轴标签被截断答案

【问题标题】：Chart.js y axis labels are truncatedChart.js y 轴标签被截断
【发布时间】：2017-12-06 18:40:54
【问题描述】：

我有一个引导模式，其中有一个 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;">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>

有什么线索吗？

【问题讨论】：

标签： chart.js

【解决方案1】：

只需添加以下内容：

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

这将解决问题。

【讨论】：

嗨@VAAA。您的解决方案似乎没有帮助。您的解决方案只会将图形向左移动 10 像素。我们要管理可用空间中的标签。假设 y 轴的宽度为 50px。

【解决方案2】：

只需复制并粘贴以下选项即可解决您的问题，还可以通过删除或添加属性进行自定义。

lineGraphOption: ChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    elements: {
        point:
        {
            radius: 0,
        },
    },
    tooltips: {
        mode: 'index'
    },
    layout: {
        padding: {
            top: 50,
            right: 10,
            bottom: 50,
            left: 10,
        }
    },
    legend: {
        position: "bottom",
        display: true,
        onClick: (() => {
        }),
        align: "center",
        labels: {
            boxWidth: 12,
            padding: 30
        },
    },
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                unit: 'day',
                minUnit: 'month',

                unitStepSize: 4,
                displayFormats: {
                    'month': 'MMM DD',
                }
            },
            ticks: {
                max: '31 Oct',
            }
        }],
        yAxes: [{
            ticks: {
                callback: function (value) {
                    return value + ' K'
                }
            },
        }]
    },

    plugins: {

    }
}

【讨论】：