如何使用 laravel 和 vue js 动态实现 chartkick

Question

我正在尝试在 vue 组件中使用 laravel 实现 chartkick 我正在尝试使用 vue 组件

遍历 table 中的所有数据

我已经创建了一个 api 它可以从数据库中获取所有数据，但我正在尝试使用 vue js 组件中的 chartkick 遍历日期和数量例如，如果这一天的日期是 01-05-2022，则数量是 14

<template>
    <div>
     <div class="container">
         <div class="row">
             <div class="col-md-6" >
                 <line-chart :data="{'2021-01-01':data.quty,'2021-02-01':12,'2021-03-01':14}"
                 ></line-chart>

                </div>
         </div>
     </div>


    </div>
</template>
<script>

export default{
    data(){
        return{
            data:{},
        }
    },
    mounted(){
        axios.get('/data').then(response=>{
            this.data=response.data;

        })
    }
}
</script>

文档仅显示静态数据，但我想传递通过 api 获取的动态数据。我不知道如何在 chartkick 中使用 foreach 循环谁能指导我如何循环我的价值并在组件内部显示它们。它显示了在此数据对象中传递的静态数据，但我如何加载 api 数据并将其加载到图表 kick

中

<line-chart :data="{'2021-01-01':7,'2021-02-01':12,'2021-03-01':14}"
                 ></line-chart>

我正在使用 vue js 2

Answer 1

试一试，并确保您在某处导入了 chartkick。

<template>
    <div>
     <div class="container">
         <div class="row">
             <div class="col-md-6" >
                 <line-chart :data="chartData"
                 ></line-chart>

                </div>
         </div>
     </div>


    </div>
</template>
<script>

export default{
    data(){
        return{
            chartData:{},
        }
    },
    mounted(){
        axios.get('/data').then(response=>{
            this.chartData=response.data;

        })
    }
}
</script>

数据转换，试试

    mounted(){
        axios.get('/data').then(response=>{
            let entries = {};
            response.data.forEach(val => {
                entries[val.date] = val.quty;
            })
            this.chartData=entries;
        })
    }

如何使用 laravel 和 vue js 动态实现 chartkick

how to implment chartkick dynamically with laravel and vue js

vue.js

vuejs2

laravel-8