图表列表未显示

问题描述

这是我的图表代码

        datasets: [
      {
        label: "Fraction KG",data: data,backgroundColor: [
          "rgba(255,99,132,0.2)","rgba(54,162,235,"rgba(255,206,86,"rgba(75,192,"rgba(200,121,],},labels: label

这就是我的图表的样子：

为什么图表旁边的列表没有显示您必须设置一些选项值？

这是馅饼组件

饼图.js

import { Pie,mixins } from 'vue-chartjs';
import globalOptionsMixin from "./globalOptionsMixin";
 export default {
  name: 'pie-chart',extends: Pie,mixins: [mixins.reactiveProp,globalOptionsMixin],props: {
    extraOptions: {
      type: Object,default: () => ({})
    }
   },data() {
     return {
       ctx: null
     };
   },mounted() {
    this.$watch(
      'chartData',(newVal,oldVal) => {
        if (!oldVal) {
          debugger;
          this.renderChart(this.chartData,this.extraOptions);
        }
      },{ immediate: true }
    );
  }
};

解决方法

ChartJs 标签由 labels 属性决定。在您的示例中，这被设置为一个名为 label 的未知变量。这应该是一个字符串数组。

例如：

labels: ['Italy','India','Japan','USA']

您可以将此数组设置为您的 label 变量，无论它在哪里定义：

const label = ['Italy','USA'];

{
  ...
  labels: label
}

模板包含图表标签

  <chartjs-pie :labels="labels" :data="dataset" :bind="true"></chartjs-pie>

然后通过脚本传递数据

data: function data() {
          return {
            labels: ['Italy','USA'],dataset: [..]
          };
        },

vue-chartjs vue.js