Laravel Nova - Таможенная карта с пакетом - PullRequest
Новая
       21

Laravel Nova - Таможенная карта с пакетом

0 голосов
/ 24 сентября 2019

Я создал пользовательскую карту для использования Chartkick .Эта пользовательская карта будет иметь выпадающий список выбора, который сделает запрос Axios, чтобы получить данные из API и отобразить их на диаграмме, хотя моя проблема в том, что диаграмма не будет отображаться даже с жестко закодированными фиктивными данными, как показано ниже: 

<template>
    <card class="flex flex-col items-center justify-center">
        <span>Ben</span>
        <line-chart class="lcs" :data="chart_data"></line-chart>
    </card>
</template>

<script>
import Vue from "vue";
import Chartkick from "vue-chartkick";
import Chart from "chart.js";
Vue.use(Chartkick.use(Chart));
export default {
    props: ["card"],
    data() {
        return {
            chart_data: {
                "2017-05-13": 2,
                "2017-05-14": 5
            }
        };
    }
};
</script>

<style scoped>
.flex {
    min-height: 950px;
}
</style>

Карта работает и отображается на приборной панели.Я просто поместил теги span и вывел имя, чтобы подтвердить это, как можно увидеть здесь:

enter image description here

Я поиграл с CSS поля, чтобы убедитьсяграфик не был скрыт, как видно из измененной формы.

Мне не удается отобразить график, и я не уверен в том, что делается неправильно.

1 Ответ

0 голосов
/ 24 сентября 2019

Ваш компонент не отображается на странице, вы должны скомпилировать ваши ресурсы и зарегистрировать их в NovaServiceProvider 

npm run dev

И в функции загрузки в вашем приложении Laravel 

use Laravel\Nova\Events\ServingNova;

class NovaServiceProvider extends NovaApplicationServiceProvider
{
/**
 * Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
    $this->app->booted(function () {
        $this->routes();
    });

    Nova::serving(function (ServingNova $event) {
        Nova::script('{{ component }}', __DIR__.'/../dist/js/card.js');
    });
}

Из Документов

...