代码之家 › 专栏 › 技术社区 › P. Nick

如何删除显示在底部的X轴?

chart.js javascript

-1

P. Nick · 技术社区 · 6 年前

我正试图弄清楚如何删除这条线,如ChartJS中的图片所示。我在文档中也找不到关于它的任何内容,所有内容都很模糊。

HTML:。

<div class=“chartcontainer”>
<canvas class=“overview chart”></canvas>
</DIV>
JS:。

var ctx=document.getElementsByClassName(“overviewChart”)[0].getContext('2d');
var渐变=ctx.createLinearGradient(0,0,0,400);
gradient.addcolorstop(0,'rgba(0169255,0.2)');
gradient.addcolorstop(1,'rgba(0169255,0)';
var mychart=新图表(ctx,,{
type:'行',
数据:{
标签:[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]
数据集:【{
数据:[10,15,18,20,32,30,29,25,13,17,16,24],
背景色:渐变,
边框颜色:[
'RGB(0169255)'
],请
边框宽度:4
}]
},请
选项:{
图例:{
显示:假
},请
维护检查比率:错误,
比例:{
亚克斯:【1】{
网格线:{
颜色:“rgba(0,0,0,0)”,
},请
刻度:{
贝吉纳泽罗:是的,
fontcolor:'白色'
}
}],请

Xaxes:[答:]{
网格线:{
颜色:“rgba(0,0,0,0)”,
},请
刻度:{
fontcolor:'白色',
}
}]
}
}
})(二)
mychart.canvas.parentnode.style.height='400px';
我已经尝试了一切

网格线:{
抽屉边框:假,
颜色:“透明”
}
至

scalelineColor:'transparent'
,但没有任何效果。我知道如何解决这个问题吗?



HTML:

<div class="chartContainer">
    <canvas class="overviewChart"></canvas>
</div>


JS:

var ctx = document.getElementsByClassName("overviewChart")[0].getContext('2d');
        var gradient = ctx.createLinearGradient(0, 0, 0, 400);
        gradient.addColorStop(0, 'rgba(0,169,255,0.2)');
        gradient.addColorStop(1, 'rgba(0,169,255,0)');
var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    data: [10, 15, 18, 20, 32, 30, 29, 25, 13, 17, 16, 24],
                    backgroundColor: gradient,
                    borderColor: [
                        'rgb(0,169,255)'
                    ],
                    borderWidth: 4
                }]
            },
            options: {
                legend: {
                    display: false
                },
                maintainAspectRatio: false,
                scales: {
                    yAxes: [{
                        gridLines: {
                            color: "rgba(0, 0, 0, 0)",
                        },
                        ticks: {
                            beginAtZero:true,
                            fontColor: 'white'
                        }
                    }],

                    xAxes: [{
                        gridLines: {
                            color: "rgba(0, 0, 0, 0)",
                        },
                        ticks: {
                            fontColor: 'white',
                        }
                    }]
                }
            }
        });
        myChart.canvas.parentNode.style.height = '400px';


我已经尝试了一切

gridLines: {
  drawBorder: false,
  color: 'transparent'
}


到

scaleLineColor: 'transparent'


…但没什么用。我知道如何解决这个问题吗?

2 回复 | 直到 6 年前

timclutton 6 年前

我个人认为意见图表应该从0开始,所以设置 beginAtZero: true 不是可行的解决方案。我只需设置轴选项 zeroLineColor 透明化:

options: {
    scales: {
        yAxes: [{
            gridLines: {
                zeroLineColor: 'rgba(0, 0, 0, 0)'
            }
        }]
    }
}

P. Nick 6 年前

我解决了!对于任何有相同问题的人,这是由 beginAtZero:true .只需将其更改为 false 它就会消失。