如何使用 Chartkick.js 隐藏轴

【问题标题】：How to hide axis using Chartkick.js如何使用 Chartkick.js 隐藏轴
【发布时间】：2018-04-23 06:13:04
【问题描述】：

我正在使用https://github.com/ankane/vue-chartkick 绘制 Vue 图表，但似乎没有说明如何从那里隐藏轴。

有人知道如何在这个库中做到这一点吗？

提前致谢。

【问题讨论】：

您可以将轴刻度回调设置为返回 null（请参阅chartjs.org/docs/latest/axes/labelling.html）。这将防止生成刻度线和刻度线标签。但是还没有想出如何去除剩余的多余填充，所以这不是一个完整的解决方案。

标签： vuejs2 chart.js chartkick

【解决方案1】：

图表组件有一个库属性，允许您自定义图表的选项。隐藏/删除折线图的 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，但这仍然会留下太多空间。

【讨论】：