如何使用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
        }]
      }
    }
  }
}

因为您隐藏了

您还可以操纵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屋！