Обновляйте данные при нажатии кнопки отправить в chartjs в vuejs

#vue.js #chart.js

Вопрос:

Я создаю диаграмму, показывающую данные в vuejs, я пытаюсь обновить labels ее снова, но все еще не работает.

В ChartjsComponentLineChart.vue :

 <script>
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props: {
    data: {
      type: Object,
      default: null,
    },
    options: {
      type: Object,
      default: null,
    },
    plugins: {
      type: Array,
      default: null,
    },
    styles: {
      type: Object,
      default: null,
    },
  },
  mounted() {
    this.renderChart(this.data, this.options, this.plugins, this.styles)
  },
}
</script>

В отчете.vue

  <b-card-body>
    <chartjs-component-line-chart
      :height="400"
      :data="data"
      :options="options"
      :plugins="plugins"
    />
  </b-card-body>

 <b-button
    variant="primary"
    class="btn-tour-finish"
    @click="submitData"
    >Submit
</b-button>



data() {
  return: {
     data: {
        labels: [],
        datasets: [
          {
            data: [70, 95, 100, 120, 257, 271, 300, 321, 383, 450],
            label: "Supper",
            borderColor: "#3e95cd",
          },
        ],
      },
      options: {
        title: {
          display: true,
          text: "Report",
        },
        responsive: true,
        maintainAspectRatio: false,
      },
  }
},
created() {
    this.data.labels = [1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025];
  },
methods: {
   submitData() {
     this.data.labels = [1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025, 2030];
  }
}

Схема работала. Но когда я нажимаю «Отправить (submitData()) labels «, сообщение не обновляется. Есть ли способ обновить «метки», когда я нажимаю. Дай мне какие-нибудь идеи. Спасибо

1. Пожалуйста, добавьте весь соответствующий код, который вы используете, поэтому в этом случае наиболее важная часть вашего chartjs-component-line-chart кода отсутствует. Без этого невозможно будет понять, почему это не работает, и это будут только догадки

2. @LeeLenalee Я обновил вопрос.. Вы можете мне помочь? Спасибо

Ответ №1:

Chart.js сам по себе не является реактивным, вам нужно самостоятельно вызывать update метод при изменении данных. Это поведение, не являющееся реактивным из коробки, перенимается vue-chartjs.

Чтобы сделать его реактивным, вам нужно добавить reactiveProp миксин в компонент LineChart в соответствии с документами.

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

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  }
}

Вы также можете реализовать свой собственный наблюдатель и вызвать метод обновления chart.js сами в соответствии с документами

 watch: {
  data () {
    this.$data._chart.update()
  }
}

1. Отсутствует необходимая опора: «chartData» .. Это ошибка, которую я получил, когда последовал вашему предложению. Вы можете сказать мне, как исправить эту ошибку? Спасибо

2. Должно было быть данными, так как ваша опора называется данными, я думаю

3. Да, я позвонил: :chart-data="data" и это было успешно.. Но когда я нажимаю «Отправить», метки по — прежнему не меняются?

Ответ №2:

Я успешно это исправил.Таким образом : v-if="loaded"

 <b-card-body>
    <chartjs-component-line-chart
      v-if="loaded"
      :height="400"
      :data="data"
      :options="options"
      :plugins="plugins"
    />
  </b-card-body>

data() {
  return: {
     data: {
        loaded: false,
        labels: [],
        datasets: [
          {
            data: [70, 95, 100, 120, 257, 271, 300, 321, 383, 450],
            label: "Supper",
            borderColor: "#3e95cd",
          },
        ],
      },
      options: {
        title: {
          display: true,
          text: "Report",
        },
        responsive: true,
        maintainAspectRatio: false,
      },
  }
},
created() {
    this.data.labels = [1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025];
    this.loaded = true;
  },
methods: {
   submitData() {
     this.data.labels = [1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025, 2030];
     this.loaded = true;
  }
}