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>

因此，我确保推入操作更新了数据，并且该图表正在使用所述数据，它更多有关反应式图表以及在加载新数据时实际在屏幕上加载给用户的数据。

Answer 1

您正在传递TRIM()，但在组件内部使用了chartData。

请尝试更新：

datacollection

Vue-ChartJS不反应

1 个答案: