javascript - 未使用 Vue Chart JS 选项
问题描述
我在我的 Nuxt JS/Vue 项目中使用 Vue Chart JS v3.5.1,我注意到当尝试使用选项并将它们作为道具传递时,没有任何反应,尽管我是图表默认设置为图表的默认设置覆盖设置。
我有几个文件:
- 插件/LineChart.js
- 组件/LineChart.vue
插件/LineChart.js
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
computed: {
localOptions: function() {
return this.chartOptions
},
localData: function() {
console.log(`data: ${this.chartData}`)
return this.chartData
}
},
mounted () {
this.renderLineChart()
},
methods: {
/*
** Render a line chart
*/
renderLineChart () {
// this.chartdata is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.localData, this.localOptions)
}
},
watch: {
chartData: {
handler: function (val, oldVal) {
this._data._chart.destroy()
this.renderLineChart()
},
deep: true
},
chartOptions: {
handler: function (val, oldVal) {
this.localOptions = val
},
deep: true
}
}
}
组件/LineChart.vue
<template>
<div>
<line-chart :chart-data="customChartData" :chart-options="customChartOptions" class="data-chart"></line-chart>
</div>
</template>
<style>
.data-chart canvas {
width: 100% !important;
height: auto !important;
}
</style>
<script>
import LineChart from '~/plugins/LineChart.js'
export default {
components: {
LineChart
},
props: {
labels: {
type: Array,
default: null
},
datasets: {
type: Array,
default: null
},
options: {
type: Object,
default: () => ({})
}
},
data () {
return {
customChartData: {},
customChartOptions: {}
}
},
mounted () {
this.fillData()
},
methods: {
fillData () {
this.customChartData = {
labels: this.labels,
datasets: this.datasets
}
this.customChartOptions = {
options: this.options
}
}
}
}
</script>
我的用法相当简单,但我没有显示我的选项?
<LineChart
:options="{
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false
},
ticks: {
autoSkip: true,
maxTicksLimit: 3,
maxRotation: 0,
minRotation: 0
}
}],
yAxes: [{
display: true,
gridLines: {
display: true,
color: '#f3f5f6'
}
}]
},
elements: {
point: {
radius: 0,
hitRadius: 35
}
}
}"
:labels="['test']"
:datasets="[{
fill: false,
borderWidth: 2.5,
pointBackgroundColor: '#fff',
borderColor: '#5046e5',
data: [500,
}]"
/>
我究竟做错了什么?
更新另外,我在页面上的很多图表中似乎只有第一个图表显示数据,为什么一系列图表中只有一个图表显示数据,每个图表我都有一个键。
解决方案
在您的 fillData 中,您似乎分配了错误的选项。Vue Chartjs 需要一个带有选项的对象,而不是一个带有选项字段选项的对象。
如果您将:更改this.customChartOptions = {options: this.options}
为:this.customChartOptions = this.options
它应该可以工作
推荐阅读
- c# - 如何为 SQLite 数据库迁移的多对多连接表编写 C# MVC 模型{已编辑}
- python - 多个线程永远无法运行并且无法获取事件
- c++ - 如何使用 istream_iterator 从 ifstream 中读取带空格的字符串?
- fortran - MPI_Win_create 的基本 RMA 问题,当大小为非零时,参数 NULL 基指针中的 Null 指针无效
- javascript - 函数属性无缘无故进入全局变量
- angular8 - 如何修复 ng 构建
在angular8升级中将public_api.ts重命名为public-api.ts时出错 - html - 为什么我的 html 页面在重新加载时会冻结 firefox?
- javascript - Axios 使 DELETE 和 GET 顺序错误
- php - 如何修复错误出现问题:SQLSTATE[HY093]: Invalid parameter number: parameter was not defined when using the UPDATE function in php
- java - 在 Spring Boot 中使用相对重定向失败