jquery 如何在chart js中删除图表中的轴线

zujrkrfu  于 2023-02-21  发布在  jQuery
关注(0)|答案(2)|浏览(160)

我画了一个图表使用图表如下

在这个上面的图表中,我想使一条线更粗(粉红色标记)像其他线,我也想删除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}
            }
        });
pnwntuvh

pnwntuvh1#

您可以在这里找到当前的轴配置选项: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,
        }]
    }
};
bvhaajcl

bvhaajcl2#

只需将border更改为false。

const config = 
{
    type: 'line',
    data,
    options: {
        scales:{
                y: {
                    beginAtZero: false,
                    border:{
                        display:false
                    }
                },
                x: {
                    beginAtZero: false,
                    border:{
                        display:false
                    }
                }   
            }
        }   
    }
}

相关问题