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

Question

我使用图表js绘制了一个图表，如下所示

在上面的图表中，我想像其他线一样加粗一条线(粉红色标记)，并且我想删除 x 轴线(绿色标记)。我该怎么做，请帮助我。

请在这里查看 fiddle 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

Axes 配置选项有一个全局字段 display ，其描述如下:

如果设置为 false，则轴将在 View 中隐藏。覆盖 gridLines.display、scaleLabel.display 和ticks.display。

这是我的实现方式:

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