最佳答案
图表组件有一个库属性,允许您自定义图表的选项。隐藏/删除折线图的 x 轴如下所示:
<line-chart :data="lineData" :library="chartOptions">
...并在您的组件中...
data () {
return {
lineData: [
{name: 'Line A', data: {'1': 3, '2': 4, '3': 2, '4': 1}},
{name: 'Line B', data: {'1': 2, '2': 3, '3': 4, '4': 1}}
],
chartOptions: {
layout: {
padding: {left: 10, right: 5, top: 5, bottom: 2}
},
scales: {
xAxes: [{
display: false // this hides the x-axis
}]
}
}
}
}
因为您隐藏了 x 轴,所以您可能需要调整布局填充(如上所示)。
您还可以操纵 xAxes 的 ticks 属性以使回调返回 null,但这仍然会留下太多空间。
关于vuejs2 - 如何使用 Chartkick.js 隐藏轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49974479/