Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/clojure/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 我能';是否更新我的vue图表的数据?_Javascript_Vue.js_Vue Chartjs - Fatal编程技术网

Javascript 我能';是否更新我的vue图表的数据?

Javascript 我能';是否更新我的vue图表的数据?,javascript,vue.js,vue-chartjs,Javascript,Vue.js,Vue Chartjs,我的图表有一个非常特殊的问题。 所以基本上我有4类破坏 0=Materialfehler,1=Zeichung fehlerhaft,2=Material fehlend,3=gefertigte Rohre 在下面的图表中,我想为每个类别创建一个简单的图表,它引用了一周中的几天 我现在的问题是:似乎不可能以正确的方式更新图表。 以下是我的数据块摘录: export default { data() { return { disrupti

我的图表有一个非常特殊的问题。 所以基本上我有4类破坏

0=Materialfehler,1=Zeichung 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;
        },
生成函数的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);
        });

编辑:

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);
        });
}
我的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>


数据更新后,是否调用图表上的“绘制”方法?