javascript - 增加图表 js 中 x 轴和第一个水平条之间的空间

Question

提前感谢您的帮助。我正在使用图表 js 来表示数据。我想增加第一个水平条和 x 轴之间的距离。谁能帮我解决这个问题

我得到的输出[2]: /image/Cllcl.png

我想要的输出:[1]:/image/Gou3q.png(这里x轴和紫罗兰色条之间有空间)

Chart.elements.Rectangle.prototype.draw = function() {
    var ctx = this._chart.ctx;
    var vm = this._view;
    var left, right, top, bottom, signX, signY, borderSkipped, radius;
    var borderWidth = vm.borderWidth;
    // Set Radius Here
    // If radius is large enough to cause drawing errors a max radius is imposed
    var cornerRadius = 20;

    if (!vm.horizontal) {
        // bar
        left = vm.x - vm.width / 2;
        right = vm.x + vm.width / 2;
        top = vm.y;
        bottom = vm.base;
        signX = 1;
        signY = bottom > top ? 1 : -1;
        borderSkipped = vm.borderSkipped || "bottom";
    } else {
        // horizontal bar
        left = vm.base;
        right = vm.x;
        top = vm.y - vm.height / 2;
        bottom = vm.y + vm.height / 2;
        signX = right > left ? 1 : -1;
        signY = 1;
        borderSkipped = vm.borderSkipped || "left";
    }

    // Canvas doesn't allow us to stroke inside the width so we can
    // adjust the sizes to fit if we're setting a stroke on the line
    if (borderWidth) {
        // borderWidth shold be less than bar width and bar height.
        var barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
        borderWidth = borderWidth > barSize ? barSize : borderWidth;
        var halfStroke = borderWidth / 2;
        // Adjust borderWidth when bar top position is near vm.base(zero).
        var borderLeft = left + (borderSkipped !== "left" ? halfStroke * signX : 0);
        var borderRight =
            right + (borderSkipped !== "right" ? -halfStroke * signX : 0);
        var borderTop = top + (borderSkipped !== "top" ? halfStroke * signY : 0);
        var borderBottom =
            bottom + (borderSkipped !== "bottom" ? -halfStroke * signY : 0);
        // not become a vertical line?
        if (borderLeft !== borderRight) {
            top = borderTop;
            bottom = borderBottom;
        }
        // not become a horizontal line?
        if (borderTop !== borderBottom) {
            left = borderLeft;
            right = borderRight;
        }
    }

    ctx.beginPath();
    ctx.fillStyle = vm.backgroundColor;
    ctx.strokeStyle = vm.borderColor;
    ctx.lineWidth = borderWidth;

    // Corner points, from bottom-left to bottom-right clockwise
    // | 1 2 |
    // | 0 3 |
    var corners = [
        [left, bottom],
        [left, top],
        [right, top],
        [right, bottom],
    ];

    // Find first (starting) corner with fallback to 'bottom'
    var borders = ["bottom", "left", "top", "right"];
    var startCorner = borders.indexOf(borderSkipped, 0);
    if (startCorner === -1) {
        startCorner = 0;
    }

    function cornerAt(index) {
        return corners[(startCorner + index) % 4];
    }

    // Draw rectangle from 'startCorner'
    var corner = cornerAt(0);
    ctx.moveTo(corner[0], corner[1]);

    for (var i = 1; i < 4; i++) {
        corner = cornerAt(i);
        nextCornerId = i + 1;
        if (nextCornerId == 4) {
            nextCornerId = 0;
        }

        nextCorner = cornerAt(nextCornerId);

        width = corners[2][0] - corners[1][0];
        height = corners[0][1] - corners[1][1];
        x = corners[1][0];
        y = corners[1][1];

        var radius = cornerRadius;

        // Fix radius being too large
        if (radius > height / 2) {
            radius = height / 2;
        }
        if (radius > width / 2) {
            radius = width / 2;
        }

        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
    }

    ctx.fill();
    if (borderWidth) {
        ctx.stroke();
    }
};

/********************************************
 OVERVIEW PAGE HORIZONTAL BAR CHART
*********************************************/
var lbls = ["Completed", "Average Score"];
var datas = [90, 80];
var data = {
    labels: lbls,
    datasets: [{
        label: "Pause, Think & Act",
        data: datas,
        backgroundColor: ["rgba(126, 123, 163,1)", "rgba(103, 197, 191,1)"],
        borderWidth: 0,
    }, ],
};
var options = {
    legend: {
        labels: {
            fontColor: "#555555",
            fontSize: 20,
            boxWidth: 0,
        },
    },
    scales: {
        xAxes: [{
            ticks: {
                max: 100,
                min: 0,
                stepSize: 10,
            },
            gridLines: {
                display: false,
                drawBorder: false,
            },
        }, ],
        yAxes: [{
            barPercentage: 0.55,
            categoryPercentage: 0.65,
            gridLines: {
                display: false,
            },
            ticks: {
                fontColor: "#555555",
                fontSize: 16,
            },
        }, ],
    },
};

var ctxHBar = document.getElementById("horizontal_bar_chart");
ctxHBar.height = lbls.length * 12 + 6;
//console.log(ctxHBar.height);
Chart.defaults.global.defaultFontFamily = "Roboto";
Chart.defaults.global.defaultFontStyle = "500";
var myHorizBarChart = new Chart(ctxHBar, {
    type: "horizontalBar",
    data: data,
    options: options,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="container">
        <canvas id="horizontal_bar_chart"></canvas>
    </div>

Answer 1

您可以将 tickMarkLength: 50 添加到 options/scales/xAxes/gridLines :

        gridLines: {
            display: false,
            drawBorder: false,
          tickMarkLength: 50
        },

和结果: