如何在html中使用chartkick和vue？

编程问答 2022-05-19

问题描述

我尝试在 vue.js 中使用 chartkick。我在这里使用 vue 和 vuetify 作为我的 laravel 项目中的 CDN。我不能在这里使用 chartkick。我不明白如何设置。我是这样试的。

@extends('layouts.app')

@section('page_content')


<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"   rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">


<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="{{ asset('js/vue-chartkick.min.js') }}"></script>
<script src="{{ asset('js/chartkick.js') }}"></script>
<script src="{{ asset('js/chart.min.js') }}"></script>



<div class="content-wrapper" style="min-height: 0px;"   >
  <v-app color="grey lighten-5" id="app">

    <line-chart :data="{'2017-01-01': 11,'2017-01-02': 6}"></line-chart>

  <v-spacer></v-spacer>

  </v-app>

</div>


<script>
  var app = new Vue({
    vuetify: new Vuetify(),el: '#app',})
</script>
@endsection

解决方法

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

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

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

chartkickhtmljavascriptlaravellaravelvue.js