Vuejs - Chart.js包装器vue3- are v2在数据作为对象传递时不显示标签。

Question

当我以对象的形式传递数据(包括x标签)时，它没有显示所有的数据，标签也没有定义。

我的Home.vue文件：

<template>
  <MonthlyChart :chartData="chartData" :chartOptions="chartOptions" />
</template>

<script>
import { defineComponent } from 'vue'
import MonthlyChart from '../components/Chart2.vue'

export default defineComponent({
  name: 'App',
  components: {
    MonthlyChart
  },
  data(){
      return{
          chartData: {
            
            datasets: [
              {
                label: 'GitHub Commits',
                backgroundColor: '#f87979',
                data: [
                  {x: 10, y: 20},
                  {x: 20, y: 10},
                  {x: 30, y: 20},
                  {x: 40, y: 20},

                  ]
              }
            ]
          },

          chartOptions: {
            parsing: false,
          }
      }
  }
})
</script>

我的Chart2.vue组件：

<script>
import { defineComponent } from 'vue'
import { Line } from 'vue3-chart-v2'

export default defineComponent({
  name: 'MonthlyChart',
  extends: Line,
  props: {
    chartData: {
      type: Object,
      required: true
    },
    chartOptions: {
      type: Object,
      required: false
    },
  },
  mounted () {
    this.renderChart(this.chartData, this.chartOptions)
  }
})
</script>

更新：

按照建议，我尝试了这两种方法。

方法1:转换字符串中的x刻度值:但仍然存在问题。

<template>
  <MonthlyChart :chartData="chartData" :chartOptions="chartOptions" />
</template>

<script>
import { defineComponent } from 'vue'
import MonthlyChart from '../components/Chart2.vue'

export default defineComponent({
  name: 'App',
  components: {
    MonthlyChart
  },
  data(){
      return{
          chartData: {            
            datasets: [
              {
                label: 'GitHub Commits',
                backgroundColor: '#f87979',
                data: [
                  {x: "10", y: 20},
                  {x: "20", y: 10},
                  {x: "30", y: 20},
                  {x: "40", y: 20},

                  ]
              }
            ]
          },

          chartOptions: {
            parsing: false,
            responsive: false,
          }
      }
  }
})
</script>

方法2:在选项中添加比例，如下所示:但仍然存在问题。

<template>
  <MonthlyChart :chartData="chartData" :chartOptions="chartOptions" />
</template>

<script>
import { defineComponent } from 'vue'
import MonthlyChart from '../components/Chart2.vue'

export default defineComponent({
  name: 'App',
  components: {
    MonthlyChart
  },
  data(){
      return{
          chartData: {            
            datasets: [
              {
                label: 'GitHub Commits',
                backgroundColor: '#f87979',
                data: [
                  {x: 10, y: 20},
                  {x: 20, y: 10},
                  {x: 30, y: 20},
                  {x: 40, y: 20},

                  ]
              }
            ]
          },

          chartOptions: {
            parsing: false,
            responsive: false,
            scales: {
              x: {
                type: 'linear',
              }
            }
          }
      }
  }
})
</script>

Answer 1

这是因为您将X值作为数字提供，而行图的X刻度的默认实现是类别，类别刻度则要求字符串作为其值。

所以你可以用两种方法来解决你的问题，要么把你的X值从数字改为字符串，要么把你的X刻度类型改为线性。

chartOptions: {
  parsing: false,
  scales:{
    x:{
      type: 'linear'
    }
  }
}