Vue-ChartJS Не реагирует

Question

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

Мой файл chart.js выглядит следующим образом.

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.datacollection, this.options)
  }
}

и мой компонент, такой как:

template>
    <div class="panel panel-default mbm">
        <table class="table table-condensed table-bordered mbn">
            <thead>
                <tr>
                    <td class="active pll prl ptm pbm">
                        <b>
                            <a @click="showLiveChat()">Chat</a>
                            <span class="pull-right">Live Chart</span>
                        </b>
                    </td>
                </tr>
            </thead>
        </table>
        <div class="panel-body">
        <Profit :chart-data="datacollection" :options="chartOptions"></Profit>
        </div>
    </div>
</template>
<script>
import Profit from "@/components/Charts/profitLive.js";
export default {
  components: {
    Profit
  },
  props: {
    userSelf: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      datacollection: [],
      balance: [],
      bet: [],
      chartOptions: {
        chart: {
          title: "Live Bet data"
        },
        colors: ["#e0440e"],
        height: 270,
        width: 500,
        hAxis: {
          title: "Bets"
        },
        vAxis: {
          title: "Profit"
        }
      },
      profit: [],

    };
  },
  methods: {
      fillData () {
        this.datacollection = {
          labels: [0, 1000],
          datasets: [
            {
              label: 'Profit',
              backgroundColor: '#f87979',
              data: this.balance
            },
          ]
        }
      },

    },
   mounted () {
      this.fillData()
    },
   watch: {
    userSelf() {
      this.balance.push(parseInt(this.userSelf.balance));
      this.Profit.updateData();
    }

  }
};
</script>

Итак, я убедился, что push обновляет данные и что диаграмма использует эти данные, это больше о реактивной диаграмме и данных на самом делезагружается пользователю на экране по мере загрузки новых данных.

Answer 1

Вы передаете chartData, но используете datacollection внутри компонента.

Пожалуйста, попробуйте обновить:

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

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options', 'chartData'],
  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)
  }
}