如何从图表js中的图表中删除轴线

Question

我使用下面的图表js绘制了一个图表

在上面的图表中，我想要像其他线条一样做一条线（粉红色标记），并且我想要移除x轴线（绿色标记）。我怎么能这样帮助我。

请在此处查看小提琴Live Chart

    var ganttchart = document.getElementById('bar-chart');
    new Chart(ganttchart, {
            type: 'line',
            data: {
                datasets: [
                {

                    label: 'Scatter Dataset',
                    backgroundColor: "rgba(246,156,85,1)",
                    borderColor: "rgba(246,156,85,1)",
                    fill: false,
                    borderWidth : 15,
                    pointRadius : 0,
                    data: [
                        {
                            x: 0,
                            y: 9
                        }, {
                            x: 3,
                            y: 9
                        }
                    ]
                },
                {
                    backgroundColor: "rgba(208,255,154,1)",
                    borderColor: "rgba(208,255,154,1)",
                    fill: false,
                    borderWidth : 15,
                    pointRadius : 0,
                    data: [
                        {
                            x: 3,
                            y: 7
                        }, {
                            x: 5,
                            y: 7
                        }
                    ]
                },
                {

                    label: 'Scatter Dataset',
                    backgroundColor: "rgba(246,156,85,1)",
                    borderColor: "rgba(246,156,85,1)",
                    fill: false,
                    borderWidth : 15,
                    pointRadius : 0,
                    data: [
                        {
                            x: 5,
                            y: 5
                        }, {
                            x: 10,
                            y: 5
                        }
                    ]
                },
                {
                    backgroundColor: "rgba(208,255,154,1)",
                    borderColor: "rgba(208,255,154,1)",
                    fill: false,
                    borderWidth : 15,
                    pointRadius : 0,
                    data: [
                        {
                            x: 10,
                            y: 3
                        }, {
                            x: 13,
                            y: 3
                        }
                    ]
                }
                ]
            },
            options: {
                legend : {
                    display : false
                },
                scales: {
                    xAxes: [{
                        type: 'linear',
                        position: 'top',
                        gridLines: {
                            lineWidth:20
                        },
                        ticks : {
                            beginAtzero :true,
                            stepSize : 1
                        }
                    }],
                    yAxes : [{

                        gridLines: {
                            display:false,
                        },
                        ticks : {
                            beginAtZero :true,
                            max : 10,
                            display:false
                        }

                    }]
                },
                animation: {
                  duration: 0
                },
                hover: {animationDuration: 0}
            }
        });

Answer 1

您现在可以在这里找到轴配置选项：Axes - Chart.js Documentation

轴配置选项具有一个全局字段display，其内容如下：

If set to false the axis is hidden from view. Overrides gridLines.display, scaleLabel.display, and ticks.display.

这是我的实现方式：

public chartOptions = {
    scales: {
        xAxes: [{
            display: false,
        }],
        yAxes: [{
            display: false,
        }]
    }
};