chart.js x轴间距和修剪

Question

我们将图形实现为chart.js。

用于插入数据的代码

var customChart;

    var rectangleSet = false;

    var chartNames = [];
    var chartNumbers = [];

    var chartData = {
            type: 'line',
            data: {
                labels : chartNames,
                datasets: [{
                    label: 'TEST CHART',
                    backgroundColor: window.chartColors.red,
                    borderColor: window.chartColors.red,
                    borderWidth: 2,
                    lineTension: 0,
                    data : chartNumbers, 
                    fill: false
                }]
            },
            options: {
                    responsive: true

                    , layout: {
                        padding: {
                            left: 30,
                            right: 0,
                            top: 30,
                            bottom: 0
                        }
                    }

                    , maintainAspectRatio: false
                    , animation: {
                        onComplete: function () {
                            $("#loadingMessage").html("");

                            if (!rectangleSet) {
                                 var scale = window.devicePixelRatio;                       

                                 var sourceCanvas = chartData.chart.canvas;
                                 var copyWidth = chartData.scales['y-axis-0'].width - 10;
                                 var copyHeight = chartData.scales['y-axis-0'].height + chartData.scales['y-axis-0'].top + 10;

                                 var targetCtx = document.getElementById("axis").getContext("2d");

                                 targetCtx.scale(scale, scale);
                                 targetCtx.canvas.width = copyWidth * scale;
                                 targetCtx.canvas.height = copyHeight * scale;

                                 targetCtx.canvas.style.width = '${copyWidth}px';
                                 targetCtx.canvas.style.height = '${copyHeight}px';

                                 targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth * scale, copyHeight * scale, 0, 0, copyWidth * scale, copyHeight * scale);

                                 var sourceCtx = sourceCanvas.getContext('2d');

                                 sourceCtx.clearRect(0, 0, copyWidth * scale, copyHeight * scale);
                                 rectangleSet = true;
                            }
                        },
                        onProgress: function () {
                            if (rectangleSet === true) {
                                var copyWidth = chartData.scales['y-axis-0'].width;
                                var copyHeight = chartData.scales['y-axis-0'].height + chartData.scales['y-axis-0'].top + 10;

                                var sourceCtx = chartData.chart.canvas.getContext('2d');
                                sourceCtx.clearRect(0, 0, copyWidth, copyHeight);
                            }
                        }
                    }
            },
            plugins : [ {
                    beforeInit : function(chart) {
                        chart.data.labels.forEach(function(e, i, a) {
                            if (/\n/.test(e)) {
                                a[i] = e.split(/\n/)
                            }
                        })
                    }
            } ]
    }; 

    $(document).ready(function() { 
        var loadHtml = '<img src="${contextPath}/images/common/loading5.gif">';
        $("#loadingMessage").html(loadHtml);

        setTimeout(function (){
            setAjaxChart();
        }, 500); 
    });

    function setAjaxChart() {
        var param = opener.openChartPopup.param;

        var url = getUrl();

        try {
            $.ajax({
                url: url
              , type: "POST"
              , dataType: 'json'
              , data: param
              , success: function(data) {
                  try {
                        var listData = data;

                        for (var i = 0; i < listData.length; i++) {
                            chartNames.push("TestName[" + i + "]" + "\n" + "TestSummary[" + i + "]"); // test
                            chartNumbers.push(conductance);
                        }

                        var ctx = document.getElementById('chart').getContext('2d');
                        customChart = new Chart(ctx, chartData);

                  } catch(e) {
                        $("#loadingMessage").html("");
                  }
              }, error: function(data) {
                    $("#loadingMessage").html("");
              }
            });
        } catch (e) {
            $("#loadingMessage").html("");
        }
    }

CSS和UI

<!-- Chart.js Horizontal Scroll Css -->
<style type="text/css">

#loadingMessage{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.chartWrapper {
    position: relative;
}

.chartWrapper > canvas {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events:none;
}

.chartAreaWrapper {
    display: inline-block;
    width: 15000px;
    height: 500px;
}

.axis {
    display: inline-block;
    width: 0px;
    height: 500px;
}
</style>

<div class="chartWrapper">

    <div id="loadingMessage"></div>  

    <div class="chartAreaWrapper">
        <canvas id="chart"></canvas>
    </div>

    <canvas id="axis" height="500" width="0"></canvas>
</div>

照片1：x轴上的数据太粘滞，因此我想给它一个间隔。

照片2：x轴的末端被切除。

我一直从1注入数据，但是间隔被截断为3。 我还想更改x轴间距和最后的毛刺。 但是找到解决方案并不容易，所以有人问我一个问题。

我想要一个答案。

谢谢。