Vuejs-Chartjs不会通过api请求呈现我自己的选项

问题描述

我想用我的api填写图表时遇到问题。 我的图表的extraOptions已设置，但是当我要使用它呈现图表时，它将使用默认选项。

这是我的组成部分：

import { Bar,mixins } from 'vue-chartjs';

export default {
  name: 'bar-chart',extends: Bar,mixins: [mixins.reactiveProp],props: {
    extraOptions: Object,chartData: Object,},data() {
    return {
      ctx: null
    };
  },methods: {
    
  },mounted() {
    this.renderChart(
      this.chartData,this.extraOptions
    );
    this.$watch('chartData',(newVal,oldVal) => {
      if (!oldVal) {
        console.log(this.extraOptions)
        this.renderChart(
          this.chartData,this.extraOptions
        );
      }
    },{ immediate: true });
  }
};

我的概述以及我的选项和调用api：

  <div class="row">
        <div class="col-lg-4">
          <card>
          <bar-chart :height="heightChart" :extraOptions="optionsBar" :chart-data="BarData"> </bar-chart >
          </card>
        </div>
  </div>
</template>
<script>
  import Loading from 'src/components/Dashboard/Layout/LoadingMainPanel.vue'
  import LineChart from 'src/components/UIComponents/Charts/LineChart.vue'
  import pieca from 'src/components/UIComponents/Charts/pieca.vue'
  import Clock from './Clock.vue'
  import BarChart from 'src/components/UIComponents/Charts/BarChart'
  import axios from 'axios'


  const WorldMap = () => ({
    component: import('./../Maps/WorldMap.vue'),loading: Loading,delay: 200
  })

  export default {
    components: {
      LineChart,pieca,Clock,BarChart
    },/**
     * Chart data used to render stats,charts. Should be replaced with server data
     */
    data () {
      return {
        optionsLine: {
          responsive: true,maintainAspectRatio: false,title: {
            display: true,text: 'CA Mensuel/12 mois',fontSize: 17,fontFamily: "'Montserrat','Helvetica Neue',Arial,sans-serif",fontStyle: 'normal',fontColor: 'black',}
        },optionsBar: {
          maintainAspectRatio: false,legend: {
            display: false,labels: {
              fontColor: '#ced4da'
            }
          },text: 'Cmd/Transporteur',responsive: true,tooltips: {
            backgroundColor: '#f5f5f5',titleFontColor: '#333',bodyFontColor: '#666',bodySpacing: 4,xPadding: 12,mode: "nearest",intersect: 0,position: "nearest"
          },legend: {
            display:true,position: 'bottom'
          },scales: {
            yAxes: [{
        
              stacked: true,gridLines: {
                drawBorder: false,color: 'rgba(29,140,248,0.1)',zeroLineColor: "transparent",ticks: {
                suggestedMin: 60,suggestedMax: 120,padding: 20,fontFamily: "'Poppins',fontColor: "#ced4da"
              }
            }],xAxes: [{
        
              stacked: true,ticks: {
                padding: 20,fontColor: "#ced4da"
              }
            }]
          }
        },heightChart: 255,BarData: {

        },

我的api请求：

      axios
        .get('api_url')
        .then(response => (globalthis.BarData = response.data.transporteur_jour
        ))

我认为我的图表正在使用我的extraOptions呈现，并且在用api数据填充时，它将采用默认选项。当我不调用api并直接在概述中填写标签时，它就可以工作。 我该怎么做才能保留我的extraOptions？

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）