Загрузка Laravel Консоли графиковvs / charts: 7. *

Question

Я новичок в laravel диаграммах. Я думал, что следуя документации, чтобы создать образец диаграммы, будет ступенькой. Следуя форме документации, добавив пакет в мой проект с помощью composer require consoletvs/charts:7.* и опубликовав файл конфигурации, запустив php artisan vendor:publish --tag=charts, а затем создав новую диаграмму с помощью команды: php artisan make:chart SampleChart, SampleChart был создан в App \ Chart

В классе SampleChart я сделал следующую конфигурацию диаграммы

 public ?string $name = 'SampleChart';
  public ?string $routeName = 'SampleChart';
   public ?array $middlewares = ['auth'];

Затем я вручную регистрирую, используя App \ Providers \ AppServiceProvider с кодом, как указано в документация

 public function boot(Charts $charts)
        {
            $charts->register([
                \App\Charts\SampleChart::class
            ]);
        }

О рендеринге диаграммы в моих представлениях; Я ввожу следующий код

<div id="chart" style="height: 300px;">    </div>
<!-- Charting library -->
 
<script src="{{ asset('js/Chart.min.js') }}"></script>//downloaded from https://unpkg.com/echarts/dist/echarts.min.js
<!-- Chartisan -->
<script src="{{ asset('js/chartisan_chartjs.js') }}">
</script> //downloaded from https://unpkg.com/@chartisan/echarts/dist/chartisan_echarts.js
<!-- Your application script -->
<script>
  const chart = new Chartisan({
    el: '#chart',
    url: "@chart('SampleChart')",
    loader: {
        color: '#222',
        size: [30, 30],
        type: 'bar',
        textColor: '#000',
        text: 'Loading some chart data...',
    },
  });
</script>

, на выходе получается гибкий элемент с заголовком «Загрузка некоторых данных диаграммы ...», и ничего не отображается. Я застрял

Я использовал учебную форму https://dev.to/arielmejiadev/use-laravel-charts-in-laravel-5bbm и https://izwebtechnologies.com/2019/06/03/how-to-create-charts-in-laravel/, но ни один из них не смог заставить меня получить sh диаграмму. хотя две ссылки на руководства предназначены для диаграммы 6. * Позже я прочитал, что у них разные подходы к дизайну диаграмм. Я использую графики Laravel7 и : 7. *

Answer 1

Я являюсь автором.

Некоторые проблемы могут быть переданы на laravel графики, а другие - на chartisan. Я делаю все возможное, чтобы все здесь были довольны, но, похоже, люди недовольны документами.

Я создаю примерную страницу со всевозможными примерами на странице charisan.

Помните laravel диаграммы теперь действуют только как оболочка для пакета php chartisan.

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

Что именно не ясно из документации?

Answer 2

попробуйте запустить без набора public ?array $middlewares = ['auth'];. просто public ?array $middlewares = [];

^^^^^^^^^^ именно так я использовал с Laravel package ^^^^^^^^^^

vvvvvvvvvvvvvvvvvvvv Вот как я использую сейчас vvvvvvvvvvvvvvvvvvv

Через некоторое время после использования ConsoleTV / Charts я решил не использовать его как пакет Laravel. Я избавляюсь от его использования и использую только версию javascript.

Чтобы получить данные, я сделал следующее:

Создайте контроллер с любым именем и добавьте такую ​​функцию :

    public function chartSample1()
    {
        $data = array(
            "chart" => array(
                "labels" => ["First", "Second", "Third"]
            ),
            "datasets" => array(
                array("name" => "Sample 1", "values" => array(10, 3, 7)),
                array("name" => "Sample 2", "values" => array(1, 6, 2)),
            )
        );

        return $data;
    }

В « routes / web. php» добавлено:

Route::get('/chartSample1', 'MyChartController@chartSample1')->name('chartSample1');

И на странице:

@extends('layouts.app')

@section('content')
<div class="row justify-content-center">
    <div class="col-sm-12 align-self-center">
        <div class="row">
            <div class="col-lg-3">
                <div class="card shadow p-3 mb-5 bg-white rounded">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>

                        <div id="chart" style="height: 300px;"></div>

                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card shadow p-3 mb-5 bg-white rounded">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <div id="chart2" style="height: 300px;"></div>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card shadow p-3 mb-5 bg-white rounded">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <div id="chart3" style="height: 300px;"></div>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card shadow p-3 mb-5 bg-white rounded">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{{-- This script has more features --}}
<script src="https://unpkg.com/chart.js/dist/Chart.min.js"></script>
<script src="https://unpkg.com/@chartisan/chartjs/dist/chartisan_chartjs.js"></script>

{{-- 
<script src="https://unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="https://unpkg.com/@chartisan/echarts/dist/chartisan_echarts.js"></script> 
--}}

</script>
<script>
    const chart = new Chartisan({
        el: '#chart',
        url: "{{ route('chartSample1') }}",
        hooks: new ChartisanHooks()
        .colors(['#ECC94B', '#4299E1'])
        .legend()
        loader: {
            color: '#ff00ff',
            size: [30, 30],
            type: 'bar',
            textColor: '#11ff00',
            text: 'Loading some chart data...',
        }
    });
    
    const chart2 = new Chartisan({
        el: '#chart2',
        data: {
            chart: { "labels": ["First", "Second", "Third"] },
            datasets: [
                { "name": "Sample 1", "values": [10, 3, 7] },
                { "name": "Sample 2", "values": [5, 6, 2] }
            ],
        },
        hooks: new ChartisanHooks()
            .colors(['#ECC94B', '#4299E1', '#AAEE11'])
            .legend({ position: 'left' })
            .beginAtZero()
            .datasets([{ type: 'line', fill: false }, 'bar']),
    });

    const chart3 = new Chartisan({
        el: '#chart3',
        data: {
            chart: { "labels": ["First", "Second", "Third"] },
            datasets: [
                { "name": "Sample 1", "values": [10, 3, 7] },
            ],
        },
        hooks: new ChartisanHooks()
            .colors(['#ECC94B', '#4299E1', '#AAEE11'])
            .datasets([{ type: 'pie', fill: true }, 'pie']),
    });

</script>

Answer 3

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

Ваш URL рендеринга также неверен. Он должен быть в случае змеи:

//SampleChart will be
@chart('sample_chart')

//PostData will be
@chart('post_data')

Если вы указали маршрут в своем классе Chart, вам нужно будет использовать это: @chart('your_route'). Если вы не знаете свой маршрут, используйте команду php artisan route:list -c для проверки.

Если вы хотите указать тип диаграммы, вы должны использовать крючки.

Я столкнулся с Немного проблема. Все работает для линейной и линейчатой ​​диаграмм, но я не могу представить диаграмму ap ie. Пончик тоже не работает.