如何使用Vuechartjs删除Y轴和Z轴

6tqwzwtp  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(162)

我试图删除轴,让图表的线出现,我可能会撞到我的头在墙上几次之前,我晕了,所以请帮助我。这是组件,我试图访问选项示例,但我不知道我应该在哪里使用它。
我尝试在 data() 中使用options示例,但没有成功,这可能是一些简单的错误,但这是我第一次使用vuechartjs

<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>
um6iljoc

um6iljoc1#

你需要在你的选项对象中禁用轴,如下所示:

chartOptions: {
  scales: {
    x: {
      display: false
    },
    y: {
      display: false
    }
  }
}

相关问题