我试图删除轴,让只图表的线出现,我可能会撞到我的头在墙上几次之前,我晕了,所以请帮助我。这是组件,我试图访问选项示例,但我不知道我应该在哪里使用它。
我尝试在 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>
1条答案
按热度按时间um6iljoc1#
你需要在你的选项对象中禁用轴,如下所示: