如何使用Chartkick.js隐藏轴-Java 学习之路

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

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

提前致谢 .

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，但这仍然会留下太多空间 .

回复于 2024-05-03T08:34:13+08:00

如何使用Chartkick.js隐藏轴

1 回答

相关问题