加载Laravel图控制台/图表:7.*

Question

我对laravel图很陌生，我认为按照这些文件制作一个样本图将是一个垫脚石。遵循文档形式，使用composer require consoletvs/charts:7.*将包添加到我的项目中，并通过运行php artisan vendor:publish --tag=charts发布配置文件，然后使用以下命令创建一个新的图表：php artisan make:chart SampleChart a SampleChart是在App\图表下生成的

在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>

输出是一个带有标题“加载一些图表数据.”的flex项。什么都没显示出来。卡塞

我使用了教程表单https://dev.to/arielmejiadev/use-laravel-charts-in-laravel-5bbm和https://izwebtechnologies.com/2019/06/03/how-to-create-charts-in-laravel/，但是没有一个能让我完成一个图表。虽然这两个教程的链接是用于图表6。*我后来阅读了这两篇文章，但这两篇文章对图表的设计有着不同的方法。我正在使用Laravel7和图表:7.*

Answer 1

我是作者。

其中一些问题可能会被发布到laravel图表上，而其他问题则可能会被提交给chartisan。我正在尽我最大的努力让这里的每个人都开心，但似乎人们对医生不满意。

我正在创建一个示例页面，在chartisan的页面上包含各种各样的示例。

请记住，laravel图表现在只充当chartisan的php包的包装器。

对于一个人来说，这是一个很大的项目，我喜欢看到建设性的反馈。

从那些有魅力的医生那里可以看出什么不清楚？

Answer 2

尝试在没有public ?array $middlewares = ['auth'];设置的情况下运行。只有public ?array $middlewares = [];

^--这是我如何与Laravel软件包^使用的方法。

在使用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('your_route')。如果您不知道您的路线，请使用php artisan route:list -c命令进行检查。

如果要指定图表的类型，则必须使用钩子。

我自己也遇到了一个小问题。所有的东西都适用于线条图和条形图，但我不能给出一个饼图。甜甜圈也不起作用。