如何使用vue-chartjs移除Y、Z轴 仅保留折线图折线显示

需要移除vue-chartjs折线图的坐标轴，实现仅展示折线的效果。尝试在data()中配置options实例未生效，首次使用vue-chartjs未定位到配置错误，相关组件代码如下：

<template>
  <div class="col-sm-3 col-md-5 p-3">
    <span class="m-3">Balance</span>
      <LineChartGenerator
        :chart-options="chartOptions"
        :chart-data="chartData"
        :chart-id="chartId"
        :dataset-id-key="datasetIdKey"
        :plugins="plugins"
        :css-classes="cssClasses"
        :styles="styles"
        :width="50"
        :height="100"
      /> 
  </div>
</template>
<script>
import { Line as LineChartGenerator } from 'vue-chartjs'

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  CategoryScale,
  PointElement
} from 'chart.js'

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  CategoryScale,
  PointElement
)
export default {
  name: "BalanceG",
components: {
    LineChartGenerator,
  },
  props: {
    chartId: {
      type: String,
      default: 'line-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => {}
    },
    plugins: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartData: {
        labels: [
          'January',
          'February',
          'March',
          'April',
          'May',
          'June',
          'July'
        ],
        datasets: [
          {
            label: 'Data One',
            data: [10, 90, 34, 35, 88, 12, 40],
            borderColor: "#F1603F",
            pointRadius: 0,
          }
        ]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false,
        plugins:{           
          legend:{
            enable:false,
            display:false,
            position: "top",
          }
        }
      },
    }
  }
}
</script>

现有配置存在两处问题：

• 只配置了图例隐藏规则，没有添加坐标轴相关配置。Chart.js中坐标轴的显隐控制属于scales配置项，和plugins平级，原有配置未覆盖该字段，所以坐标轴默认显示。
• 图例配置中enable: false是无效字段，Chart.js统一使用display属性控制元素显隐，该冗余字段不会生效。

修改chartOptions配置，新增scales字段将x、y轴的display属性设为false即可，修改后的完整配置如下：

chartOptions: {
  responsive: true,
  maintainAspectRatio: false,
  plugins:{           
    legend:{
      display:false
    }
  },
  scales: {
    x: {
      display: false
    },
    y: {
      display: false
    }
  }
}

配置生效后，坐标轴的轴线、刻度、网格线会全部隐藏，页面仅保留折线元素。你已经在代码中注册了LinearScale（y轴）、CategoryScale（x轴）组件，不需要额外引入其他依赖。

如果你使用的是2.x及更低版本的Chart.js，scales配置格式需要调整为数组形式：

scales: {
  xAxes: [{ display: false }],
  yAxes: [{ display: false }]
}

内容的提问来源于stack exchange，提问作者Temujin