Vuejs + Chartjs未显示图表

时间:2017-12-20 04:03:04

标签: laravel-5 vue.js chart.js

我在显示图表时遇到问题,虽然getGender()中的数据是正确的,但不会显示图表。如果我在axios之外获取数据,即使我已将其设置为响应,也不返回任何数据。

 <div class="x_content">
        <canvas id="myChart"></canvas>
    </div>


<script>
  export default{
    props: ['initialCounter'],
    data(){
      return{
        gender:{},
      }
    },
    mounted(){

      axios.get('get-gender')
      .then((response)=>{ 
        this.getGender(response.data[0]) 
      })

    },
    methods:{
      getGender(data){
        console.log(this.gender)
          var ctx = document.getElementById("myChart")
          var myChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: ["Male", "Female"],
                    datasets: [{
                        label: '# of Votes',
                        data: [data.male,data.female],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
            });
      }
    }
  }
</script>

0 个答案:

没有答案