Question

我的图表有一个非常特殊的问题。因此，基本上，我将中断分为4类。

0 = Materialfehler，1 = Zeichnung fehlerhaft，2 = Material fehlend，3 = gefertigte Rohre

在下面的图表中，我想为每个类别创建一个简单的图表，以引用一周中的几天。

我现在的问题：似乎无法以正确的方式更新图表。

这是我的数据块的摘录：

 export  default {
     data() {
         return {
             disruptions: [],
             week: [],
             task: [],
             datasets: [{
                 bgColor: "#0c0306",
                 beginZero: true,
                 borderColor: "#A40000",
                 data: [],
                 //data: [3, 4, 5, 1, 2, 4, 1], - for example
                 dataLabel: "Materialfehler",
             }, {
                 bgColor: "#0c9906",
                 beginZero: true,
                 borderColor: "#580000",
                 data: [],
                 //data: [3, 4, 5, 1, 2, 3, 1],  - for example
                 dataLabel: "Zeichnung fehlerhaft",
             }, {
                 bgColor: "#0c9906",
                 beginZero: true,
                 borderColor: "#EC4A3B",
                 data: [],
                 //data: [1, 2, 3, 4, 5, 2, 4],  - for example
                 dataLabel: "Material fehlend",
             }, {
                 bgColor: "#0c9906",
                 beginZero: true,
                 borderColor: "#179C7D",
                 data: [],
                 //data: [3, 3, 5, 1, 3, 4, 5],  - for example
                 dataLabel: "gefertigte Rohre",
             }],
             labels: ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"],
         };
     },

我正在使用的方法getDisruptionByDay（）：

methods: {
        getDisruptionsByDay(arr, category) {
            var week = [
                [],
                [],
                [],
                [],
                [],
                [],
                []
            ]; //Week [Sun (0), Mo (1), Tue (2), Wed (3), Thur (4), Fri (5), Sat (6)]
            var i;
            for (i = 0; i < arr.length; i++) {
                if (moment(arr[i].Timestamp.split('T')[0]).day() == 0 && arr[i].DisruptionCategory == category) //Sun
                {
                    week[0].push(arr[i]);
                }
                if (moment(arr[i].Timestamp.split('T')[0]).day() == 1 && arr[i].DisruptionCategory == category) //Mon
                {
                    week[1].push(arr[i]);
                }
                if (moment(arr[i].Timestamp.split('T')[0]).day() == 2 && arr[i].DisruptionCategory == category) //Tue
                {
                    week[2].push(arr[i]);
                }
                if (moment(arr[i].Timestamp.split('T')[0]).day() == 3 && arr[i].DisruptionCategory == category) //Wed
                {
                    week[3].push(arr[i]);
                }
                if (moment(arr[i].Timestamp.split('T')[0]).day() == 4 && arr[i].DisruptionCategory == category) //Thur
                {
                    week[4].push(arr[i]);
                }
                if (moment(arr[i].Timestamp.split('T')[0]).day() == 5 && arr[i].DisruptionCategory == category) //Fri
                {
                    week[5].push(arr[i]);
                }
                if (moment(arr[i].Timestamp.split('T')[0]).day() == 6 && arr[i].DisruptionCategory == category) //Sat
                {
                    week[6].push(arr[i]);
                }
            }
            return week;
        },

这是出现问题的地方：

created() {
    axios.get('http://localhost:3030/disruptions/', {})
        .then(response => {
            this.disruptions = response.data.data;
            console.log(this.disruptions);

            let week_category_0 = this.getDisruptionsByDay(this.disruptions, 0);
            let week_category_1 = this.getDisruptionsByDay(this.disruptions, 1);
            let week_category_2 = this.getDisruptionsByDay(this.disruptions, 2);
            let week_category_3 = this.getDisruptionsByDay(this.disruptions, 3);

            console.log(JSON.stringify(week_category_0));
            console.log(JSON.stringify(week_category_1));
            console.log(JSON.stringify(week_category_2));
            console.log(JSON.stringify(week_category_3));

            //start week by 1 so that the first Day is Monday instad of Sunday
            let generate_0 = [week_category_0[1].length, week_category_0[2].length, week_category_0[3].length, week_category_0[4].length, week_category_0[5].length, week_category_0[6].length, week_category_0[0].length];
            this.datasets[0].data = generate_0;
            console.log(JSON.stringify(generate_0));

            let generate_1 = [week_category_1[1].length, week_category_1[2].length, week_category_1[3].length, week_category_1[4].length, week_category_1[5].length, week_category_1[6].length, week_category_1[0].length];
            this.datasets[1].data = generate_1;
            console.log(JSON.stringify(generate_1));

            let generate_2 = [week_category_2[1].length, week_category_2[2].length, week_category_2[3].length, week_category_2[4].length, week_category_2[5].length, week_category_2[6].length, week_category_2[0].length];
            this.datasets[2].data = generate_2;
            console.log(JSON.stringify(generate_2));

            let generate_3 = [week_category_3[1].length, week_category_3[2].length, week_category_3[3].length, week_category_3[4].length, week_category_3[5].length, week_category_3[6].length, week_category_3[0].length];
            this.datasets[3].data = generate_3;
            console.log(JSON.stringify(generate_3));
        })
        .catch((error) => {
            console.log(error.data);
        });
}

generate_的console.log返回正确的值，如您在屏幕截图中所见，但由于某种原因，图表将数据解释为错误。

但是，如果我只尝试一种类别，则一切都很好：

//start week by 1 so that the first Day is Monday instad of Sunday
        let generate_0 = [week_category_0[1].length, week_category_0[2].length, week_category_0[3].length, week_category_0[4].length, week_category_0[5].length, week_category_0[6].length, week_category_0[0].length];
        this.datasets[0].data = generate_0;
        console.log(JSON.stringify(generate_0));
        })
        .catch((error) => {
            console.log(error.data);
        });

编辑：

我的HTML部分如下：

<template>
  <div class="card">
    <div class="card-body">
    <br />

    </div>

    <div class="card-img-bottom">
    <canvas id="lineCanvas" />
      <chartjs-line
        v-for="(item, index) in datasets"
        :key="index"
        :backgroundcolor="item.bgColor"
        :beginzero="item.beginZero"
        :bind="true"
        :bordercolor="item.borderColor"
        :data="item.data"
        :datalabel="item.dataLabel"
        :labels="labels"
        target="lineCanvas"
      />
    </div>
  </div>
</template>

我无法更新vue-chartjs图表的数据？

0 个答案: