chart.js 从混合图表中删除下方网格

Question

我有一个混合图表（散点图和折线图），因此我需要 2 个 xAxis。

图表底部出现了一个额外的网格，因为这是另一个 x 轴通常有其标签的地方（我删除了它们，因为我不需要它们）

我正试图摆脱那个额外的网格，但我找不到如何去做。我尝试将刻度线颜色指定为白色，但网格仍然存在。

看图，就是底部那个额外的格子（标有水平括号）：

这是我的代码：

const ctx = document.getElementById('myChart');

const labels1 = ['A','R','Fyo','A-MAC','HR','Do','Rs','Dpr','GM','GF','EPK','EPS','Is1','Is2','Is3','FP','INVAR','INVER'];

const lasIs = (ctx, value) => ctx.p0DataIndex > 11 ? value: undefined;

const markedIdxs = [0,5,10,15,20,25,30,35,44, //... and many more];
const markedVals = [0,5,10,15,20,25,30,35,10,// ... and many more];

const data1 = {
    labels: labels1,
    datasets: [
        {
        type: 'line',
        label: 'Line Dataset',
        data: [65,65,65,65,65,65,65,65,65,65,65,65,65,65,65,65,65,65],
        pointRadius: 0,
        borderWidth: 1,
        borderColor: '#0070C5',
        xAxisID: 'x2'
        },
        {
        type: 'line',
        label: 'Line Dataset',
        data: [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50],
        pointRadius: 0,
        borderWidth: 1,
        borderColor: '#0070C5',
        xAxisID: 'x2'
        },
        {
        type: 'line',
        label: 'Line Dataset',
        data: [102, 38, 54, 56, 102, 38, 54, 56, 102, 38, 54, 56, 102, 38, 54, 87, 62, 91],
        pointStyle: 'circle',
        pointRadius: 5,
        borderWidth: 2,
        borderColor: 'rgba(0, 120, 161,0.5)',
        backgroundColor: 'rgba(0, 120, 161,0.5)',
        fill: true,
        segment: {
            borderColor: ctx => lasIs (ctx, 'rgba(0, 168, 172, 0.5'),
            backgroundColor: ctx => lasIs (ctx, 'rgba(0, 168, 172, 0.5'),
        },
        xAxisID: 'x2'
        },
        {
        type: 'scatter',
        pointStyle: 'dash',
        pointRadius: 6,
        borderColor: 'rgba(0, 0, 255,0.2)',
        xAxisID: 'x',
        data: [{x:1, y:36}, {x:1, y:37}, {x:1, y:39}, {x:1, y:40}, {x:1, y:42}... //and many more]
        },

    ],

};


const multiplos5 = {
  id: 'multiplos5',
  afterDatasetsDraw(chart, args, options) {
        const {ctx} = chart;
        ctx.save();
        ctx.font = "8px Verdana";
        ctx.fillStyle = "#0070C5";
        yaSeDibujo=84;
        paddLeft = 0;
        
        for (i=0; i < markedIdxs.length; i++) {
            if (markedVals[i] < 10)
                paddLeft=8;
            else
                paddLeft=12;
            
            ctx.fillText(markedVals[i], chart.getDatasetMeta(3).data[markedIdxs[i]].x - paddLeft, chart.getDatasetMeta(3).data[markedIdxs[i]].y + 3);
        }
  }
};

Chart.register(multiplos5);

const myChart = new Chart(ctx, {
    data: data1,
    
    options: {
        scales: {
            x2: { // add extra axes
                min: 0,
                max: 18,
                position: 'bottom',
                type: 'category',
                ticks: {color: '#0070C5'},
                offset: true
            },
            x: {
                min: 1,
                max: 18,
                ticks: {stepSize: 1, display: false},
                offset: true
            },
            y: {
                min: 20,
                max: 120,
                ticks: {stepSize: 10, color: '#555555', crossAlign: 'start'},
                grid:{color:'#f1f1f1', display:true},
            },
            y2: {
                position: 'right',
                min: 20,
                max: 120,
                ticks: {stepSize: 10, color: '#555555'},
                grid:{display:false}
            },
        },
        plugins: {
            multiplos5,
            legend: false,
            tooltip: {
                displayColors: false,
                filter: function (tooltipItem) {
                 return tooltipItem.datasetIndex == 2;
                },
                callbacks: {
                    //title: "el título",
                    label: function(context) {
                        let label = labels2[context.dataIndex] + ': ' + context.parsed.y;
                        return label;
                    }
                }
            }
        },
    },
});

Chart.js版本为3.6.2

任何 help/workaround 将不胜感激。问候！！

忘了说我说的轴是'x' (xAxisID: 'x')

Answer 1

在 X 轴的配置中，您将刻度设置为显示 false，如果您改为在 X 刻度配置的根目录中执行此操作，它将隐藏该行，因此您将得到：

scales:{
  x: {
    display: false,
    min: 1,
    max: 18,
    offset: true
  }
}

chart.js 从混合图表中删除下方网格

chart.js remove lower grid from mixed chart

javascript

chart.js

chart.js3

chart.jsv3