如何使用 Chartkick.js 隐藏轴 [英] How to hide axis using Chartkick.js

问题描述

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

I am using https://github.com/ankane/vue-chartkick to draw Vue charts, but looks like it didn't say how to hide axis from there document.

有谁知道在这个库中怎么做吗?

Does anyone know how to do it in this library?

提前致谢.

推荐答案

图表组件有一个库属性，允许您自定义图表的选项.隐藏/删除折线图的 x 轴如下所示:

The chart component has a library property that allows you to customize the options for the chart. To hide / remove the x-axis for a line chart would look like this:

<line-chart :data="lineData" :library="chartOptions">

...并且在您的组件中...

...and in your component...

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 轴，所以您可能需要调整布局内边距(如上所示).

Because you're hiding the x-axis you'll probably want to adjust the layout padding (shown above).

您也可以操纵 xAxes 的 ticks 属性以使回调返回 null，但这仍然会留下太多空间.

You could also manipulate the xAxes' ticks property for the callback to return null, but this can still leave too much space.

这篇关于如何使用 Chartkick.js 隐藏轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！