Chart.js 使用chartjs删除y轴上多余的线

我想知道如何删除折线图上多余的线条。我试图将

drawborder

设置为false，但它当然只是删除轴上的所有行。我只是想去掉指向y轴标签的不需要的垂直线，如下图中的红色标记

模板：

<d-chartrecord 
     :chart-data="datacollection" 
     v-bind:options="options"
     :height="200"
></d-chartrecord>

---

不幸的是，目前ChartJS中没有任何本机功能。您需要创建一个图表插件来实现这一点

ᴘʟᴜɣɪɴ(ᴅʀᴀᴡ x-ᴀxɪꜱ ɢʀɪᴅ-ʟɪɴᴇꜱ)

*将其放在脚本的顶部

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

Chart.plugins.register({
绘制前：函数（图表）{
var ctx=chart.chart.ctx，
x_轴=图表刻度['x轴-0']，
topY=图表。比例['y轴-0']。顶部，
底部=图表刻度['y轴-0']。底部；
x_axis.options.gridLines.display=false；//隐藏原始网格线
//循环通过x轴刻度
x_轴.记号.forEach（函数（标签，索引）{
如果（索引==0）返回；
var x=x_轴。getPixelForValue（标签）；
ctx.save（）；
ctx.beginPath（）；
ctx.strokeStyle=x_axis.options.gridLines.color；
ctx.moveTo（x，topY）；
ctx.lineTo（x，底部）；
ctx.stroke（）；
ctx.restore（）；
});
}
});
var图表=新图表（ctx{
键入：“行”，
数据：{
标签：[一月、二月、三月、四月、五月]，
数据集：[{
标签：“行”，
数据：[3,1,4,2,5]，
背景颜色：“rgba（0，119，290，0.2）”，
边框颜色：“rgba（0，119，290，0.6）”，
填充：假，
张力：0
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
步长：1
},
网格线：{
显示：假
}
}]
}
}
})；

---

在chart.js中，

网格线

提供了一个选项

勾选标记长度

来禁用轴以外的长度，例如：

 yAxes: [{
          gridLines: {
            tickMarkLength: 0,
          },
        }] 
xAxes: [{
          gridLines: {
            tickMarkLength: 0,
          },
        }]

在Chart.js（我使用的是2.9版）中，

gridLines

还提供了一个选项来禁用勾号：

drawTicks

scales: {
  xAxes: [{
    gridLines:{
      drawTicks: false
    }
  }]
}

---

您可以尝试使用此方法将颜色更改为透明：嘿，感谢这位男士，正在使用

vue chartjs

了解如何执行此操作。已经在调用图表数据的顶部添加了脚本，但运气不佳。我想这就是问题所在

var ctx=chart.chart.ctx

请查看我在如何调用cha上附加的示例代码rt.Thanksry在导入该模块的地方添加插件（您问题中的插件），只是复制和粘贴此代码不起作用：“Chart.plugins.register不是一个函数”。如何使其工作？感谢您的帮助。@Klyner使用最新版本的ChartJS-2.6.0

 yAxes: [{
          gridLines: {
            tickMarkLength: 0,
          },
        }] 
xAxes: [{
          gridLines: {
            tickMarkLength: 0,
          },
        }]

scales: {
  xAxes: [{
    gridLines:{
      drawTicks: false
    }
  }]
}