加载 Laravel 图表 consoletvs/charts:7.*

Question

我是 laravel 图表的新手。我认为按照文档制作示例图表将是一个垫脚石。按照文档表单使用composer require consoletvs/charts:7.* 将包添加到我的项目中，并通过运行php artisan vendor:publish --tag=charts 发布配置文件，然后使用以下命令创建一个新图表：php artisan make:chart 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/ 的教程表格，但没有一个能让我完成制作图表。虽然这两个教程链接是针对chart6的。*我后来读到这两个有不同的图表设计方法。 我正在使用 Laravel7 和 charts:7.*

Answer 1

我是作者。

有些问题可能与 laravel 图表有关，而其他问题可能与 chartisan 有关。我正在尽最大努力让这里的每个人都开心，但似乎人们对文档不满意。

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

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

对于一个人来说这是一个如此大的项目，我希望看到建设性的反馈。

chartisan 文档中有哪些不清楚的地方？

Answer 2

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

^^^^^^^^^^ 这就是我使用 Laravel 包的方式 ^^^^^^^^^^

vvvvvvvvvvvvvvvvvvv 我现在就是这样用的 vvvvvvvvvvvvvvvvvvvv

使用 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

我遇到了类似的问题，我已经能够解决它。您的图表类中的配置不是强制性的。您可以选择忽略它们。

您的渲染网址也错误。它应该在蛇盒中：

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

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

如果您在 Chart 类中指定了路线，则必须使用：@chart('your_route')。如果您不知道自己的路线，请使用php artisan route:list -c 命令查看。

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

我自己也遇到了一些问题。一切都适用于折线图和条形图，但我无法呈现饼图。甜甜圈也不起作用。