自定义图表js网格线

Question

我正在使用chart.js来创建图表。我需要像截图2一样创建我的图表。我从我的侧面截图2中进行了大量定制。请检查

• 1：https://prnt.sc/jcoroc（需要像那样创造）
• 2： https://prnt.sc/jcorrw（由我自定义）

请在下面查看我的代码。

window.onload = function() {
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myMixedChart = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: {
            responsive: true,
            chartArea: {
                backgroundColor: 'rgba(255,255,255, 0.1)'
            } ,              
            legend: {
                display: false
            } , 
            title: {
                display: true, 
            },
            scales: {
                pointLabels :{
                    fontStyle: "bold",
                },
                yAxes: [{
                    ticks: {
                        min: 0,
                        max: 10,
                        stepSize: 1,
                        fontColor : "#FFF",
                        fontSize : 20,
                        fontWeight:1000
                    },
                    gridLines:{
                        color: "#E5E5E5",
                        lineWidth:3,
                        zeroLineColor :"#FFF",
                        zeroLineWidth : 2
                    } 
                }],
                xAxes: [{
                    ticks:{
                        fontColor : "#FFF",
                        fontSize : 20,
                        fontWeight:1000
                    },
                    gridLines:{
                        color: "rgba(255, 255, 255, .1)",
                        lineWidth:10, 
                        drawBorder: false
                    }
                }]
            },
            tooltips: {
                mode: 'index',
                intersect: true
            },

        }
    });      


Chart.pluginService.register({
    beforeDraw: function (chart, easing) {
        if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
            var helpers = Chart.helpers;
            var ctx = chart.chart.ctx;
            var chartArea = chart.chartArea;

            ctx.save();
            ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
            ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
            ctx.restore();
        }
    }
});