Ву.js vue-диаграмма chartjs не обновляется, когда chartData заменяется, обновляется и т. д

Ву.js vue-диаграмма chartjs не обновляется, когда chartData заменяется, обновляется и т. д

07.11.2017 04:52:05 Просмотров 66 Источник

Я пытаюсь сделать vue с vue-chartjs. Я следил за всей соответствующей документацией в отношении повторного рендеринга диаграммы при обновлении опоры chartData. Моя диаграмма будет обновляться только после изменения размера окна браузера.

моя родительская карта.файл Vue :

<template>
    <div>
        <h1>Chart datacollection update test</h1>

        <p>This component demonstrates fetching data from the server.</p>

        <p v-if="!datacollection"><em>Loading...</em></p>

        <b-form-select 
                    v-model="testthingSelect.selected"
                    text="Select testthing"
                    variant="primary"
                    :options="testthingSelect.options"
                    :on-change="changetestthing"
                    class="m-md-2">                   
        </b-form-select>     
       <test-chart v-cloak :chart-data="datacollection" :chart-option="options"></test-chart>

    </div>
</template>

<script>

    import TestChart from './TestChart'

    export default {
        components: {
            TestChart 
        },
        data() {
            return {
                yAxisValues: [],
                datacollection: {},
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: false
                            },
                            gridLines: {
                                display: true
                            }
                        }],
                        xAxes: [{
                            type: "date",
                            display:true,
                            gridLines: {
                                display: false
                            }
                        }]
                    },
                    legend: {
                        display: true
                    },
                    responsive: true,
                    maintainAspectRatio: false
                },
                testthingSelect: {
                    selected: "EIA/COAL",
                    disabled: false,
                    readonly: false,
                    visible: true,
                    color: "",
                    options: [
                        {
                            value: null,
                            text: 'Select a testthing'
                        },
                        {
                            value: "item1",
                            text: "item1"
                        },
                        {
                            value: "item1",
                            text: "item1"
                        },
                        {
                            value: "item1",
                            text: "item1"
                        }
                    ]
                }
            }
        },        
        methods: {
            changetestthing: async function () {
                try {

                    let response = await this.$http.get(url for my data);
                    this.datacollection.datasets = [];
                    this.datacollection.labels = [];

                    ...required data transformations

                    this.$set(this.datacollection, "labels", labels);
                    this.$set(this.datacollection, "datasets", datasets);
                   // this.datacollection.labels = labels;
                  //  this.datacollection.datasets = datasets;

                } catch (error) {
                    console.log(error)
                }
            }
        },
        watch: {
            'commoditySelect.selected': function () { this.changeCommodity(); }

        },
        async created() {
            // ES2017 async/await syntax via babel-plugin-transform-async-to-generator
            // TypeScript can also transpile async/await down to ES5            

            try {               
                let response = await this.$http.get(url for my data);
                            this.datacollection.datasets = [];
                            this.datacollection.labels = [];

                            ...required data transformations

                            this.$set(this.datacollection, "labels", labels);
                            this.$set(this.datacollection, "datasets", datasets);
                           // this.datacollection.labels = labels;
                          //  this.datacollection.datasets = datasets;



                    } catch (error) {
                        console.log(error)
            }
        } catch (error) {
            console.log(error)
        }
    }
}

моя тестовая схема.файл Vue

<script>
    import { Line, mixins } from 'vue-chartjs'
    const { reactiveProp } = mixins

    //Exporting this so it can be used in other components
    export default {
        extends: Line,
        mixins: [reactiveProp],
        props: ['chartData', 'options'],        
        mounted() {
            this.renderChart(this.chartData, this.options)
        }
    }
</script>

Таким образом, это работает с точки зрения выбора и изменения datacollection в Родительском vue. Если я не изменю размер окна, хотя диаграмма не будет повторно отображаться. Когда parenttestchart.vue изначально загружает я получаю следующую ошибку: "Uncaught TypeError: не удается прочитать свойство "переход" из null". Но это, похоже, не влияет ни на что, так как изменение размера окна приведет к первоначальному отображению графика. Обновление метода Data changetestthing обновляет datacollection (chartData) правильно, но если я не изменю размер окна, он не будет повторно отображаться.

Как я могу заставить диаграмму повторно визуализировать? Как я могу получить ссылку на компонент TestChart в родительском элементе?? этот.Тестовая диаграмма не определена. Мне только интересно получить ссылку на случай, если из ссылки я могу вручную вызвать "renderChart" на нем. спасибо.

*** Обновление

Мне удалось обновить диаграмму со следующими изменениями:

Я удалил следующие строки из метода changetestthing :

this.datacollection.datasets = null;
this.datacollection.labels = null;

И изменил сбора данных оператор присваивания значения этому:

this.datacollection = Object.assign({}, this.datacollection, { labels: labels, datasets: datasets });

Я не могу сказать наверняка, что это лучшая практика. Согласно vue.Яш документации (https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)

new properties added to the object will not trigger changes. In such
cases, create a fresh object with properties from both the original
object and the mixin object

Поэтому я считаю, что не устанавливая datacollection.наклейка и. свойства набора данных равны нулю, а затем с помощью объекта.назначьте изменения срабатывают. Я все еще не уверен, почему они не были вызваны с помощью миксинов или ручных часов. Любые комментарии приветствуются.

У вопроса есть решение - Посмотреть?

Ответы - Ву.js vue-диаграмма chartjs не обновляется, когда chartData заменяется, обновляется и т. д / vue.js vue-chartjs chart not updating when chartData replaced, updated etc

Richard Matsen

07.11.2017 05:59:57

Один из способов, который работает, чтобы добавить наблюдателя к диаграмме,

props: ['chartData', 'options'],
mounted () {
  this.renderChart(this.chartData, this.options)
},
watch: {
  'chartData' (to, from) {
    this.renderChart(this.chartData, this.options)
  }
},

См. пример CodePen


Редактировать-наблюдатель не работает

Разница между вашим кодом и рабочим CodePen заключается в том, что CodePen мутирует переменную, переданную в диаграмму, поэтому это наблюдатель реагирует.
Ваш код мутирует .datasetsсвойство datasets переменной-есть известная проблема с этим ref: Mixins, похоже, не запускает обновление диаграммы #44 .

Попробуйте заменить

this.datacollection.datasets = [];
this.datacollection.labels = [];

с этим (оба места)

this.datacollection = { datasets: [], labels: [] };
https://stackoverflow.com/questions/47148755/vue-js-vue-chartjs-chart-not-updating-when-chartdata-replaced-updated-etc/47149281#comment81248504_47149281
Я использую vue-chartjs@3.0.0
https://stackoverflow.com/questions/47148755/vue-js-vue-chartjs-chart-not-updating-when-chartdata-replaced-updated-etc/47149281#comment81267229_47149281
Я попытался добавить часы без эффекта.Добавление миксина на самом деле делает то же самое в соответствии с документами. vue-chartjs.org/#/home?id=reactive-data . Добавление часов вручную или нет, похоже, не имеет никакого эффекта. Вы знаете, как я могу ссылаться на компонент TestChart в Родительском vue?
https://stackoverflow.com/questions/47148755/vue-js-vue-chartjs-chart-not-updating-when-chartdata-replaced-updated-etc/47149281#comment81278687_47149281
Re watch не работает - как ваше приложение отличается от примера CodePen? Это работает, так что принцип хороший.
https://stackoverflow.com/questions/47148755/vue-js-vue-chartjs-chart-not-updating-when-chartdata-replaced-updated-etc/47149281#comment81278874_47149281
Вновь ребенка, справ, см. Вью документы ребенка рефов
Является ответом!
Alexis Poo

22.02.2018 12:08:47

Билли Джин Конечная нота работал для меня разным.JS:

import {
 Pie,
 mixins
} from 'vue-chartjs'
const {
reactiveProp
} = mixins

export default Pie.extend({
   mixins: [reactiveProp],
   props: ['options'],
watch: {
'options': {
  handler(newOption, oldOption) {
    this._chart.destroy()
    this.renderChart(this.chartData, this.options)
  },
  deep: true
}
    },
  mounted() {      
    this.renderChart(this.chartData, {responsive: true, maintainAspectRadio: 
    false})
   }
})

Это на мой взгляд.файл Vue :

 let datasets = []
  let colorlist = [ '#4e5fa4', '#5e5fa4', '#6e5fa4',
  '#7e5fa4', '#8e5fa4', '#a08be4', '#b08bd4']
        datasets.push({
          label: this.data_by_city_label,
          data: this.data_by_city_data,
          fill: false,
          backgroundColor: colorlist,
          pointBorderWidth: 1,
          borderWidth: 1,
          pointRadius: 0
        })
  this.CityDatac = Object.assign({}, this.datasets, {labels: this.data_by_city_label, datasets: datasets})

С этим я могу отправить свои данные в PIECHART js и сгенерировать в моем представлении.вю как же так:

   <pie-chart-city :chartData="CityDatac" :width="300" :height="250"></pie-chart-city>

Надеюсь, это поможет кому-нибудь в VUE.Яш -> вю-chartjs.JS

SwSalim

18.09.2019 07:08:15

Код, отправленный Алексисом Пу, указывает мне в правильном направлении.

В моем случае мне нужно watchпри изменении параметра я получил сообщение об ошибке: this._chart.destroy().

Чтобы исправить проблему, я должен сделать cannot read property 'destroy' of undefined.

Надеюсь, это поможет.

Закрыть X