Question

需要在laravel 5.8和 consoletvs / chartsjs 6版中使用chartjs插件数据标签。*

此行在laravel中产生错误。

$ chart-> plugins（['datalabels'=> ['color'=>'＃223388']]）;

    $chart = new Chart;
    $chart->labels($arrHora);
    $chart->dataset('Propostas Por Hora','bar', $arrQtdHora)
          ->backgroundColor('#64b5f6');
    $chart->options([
        'responsive' => true,
        //'aspectRatio' => 1,
        'tooltips' => ['enabled'=>false],
        'legend' => ['display' => false],
        'scales' => [
            'yAxes'=> [[
                        'display'=>false,
                        'ticks'=> ['beginAtZero'=> true],
                        'gridLines'=> ['display'=> false],
                      ]],
            'xAxes'=> [[
                        'categoryPercentage'=> 0.55,
                        //'barThickness' => 100,
                        'barPercentage' => 0.5,
                        'ticks' => ['beginAtZero' => true],
                        'gridLines' => ['display' => false],
                      ]],
        ],
    ]);
    $chart->plugins(['datalabels'=>['color'=>'#223388']]);
     //dd($chart);
            //->backgroundColor('#64b5f6');
    return view('dashboard', ['chart' => $chart]);

Answer 1

我需要澄清两件事，在使用该库之后，我得出了以下结果：

首先：函数$chart->plugins仅用于创建inline plugins，在chartjs / script.blade.php下，文件开头为：

因此，对于您定义的每个plugin数组，它都会从pluginsView数组中加载一个具有相同名称的视图，但是我认为这尚未完全开发，因为这不是全部问题是让我们继续前进。

第二步：您可以像我之前建议的那样，使用options -> plugin完美地嵌套选项，但是您需要特别注意的一点是，“插件”可以不能像其他数组那样，这就是原因：

该函数希望将字符串原始打印，因此可以使用类似的内容：

$chart->options([
    //...
    'plugins' => '{datalabels: {color: \'red\'}}',
    //...
]);

将按预期工作：

Answer 2

我在这里分享了我代码的完整解决方案，如果您有任何意见或建议，欢迎您。

/ *控制器* /

<?php
namespace App\Http\Controllers\dashboard;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;
use ConsoleTVs\Charts\Classes\Chartjs\Chart;
use DB;
class DashBoardController extends Controller
{
  public function index() {
$result = DB::select('select 
                            convert(varchar(10),data_da_solicitacao,121) data,
                            convert(varchar(2),data_da_solicitacao,114) hora,
                            COUNT(id_controle_proposta_pac) qtdHora
                            from contact_std_parceiros_propostas (nolock) p
                            where convert(varchar(10),data_da_solicitacao,121) between convert(varchar(10),getdate(),121) and convert(varchar(10),getdate(),121) 
                            and not exists (select * from contact_std_parceiros_propostas_fora (nolock) f where f.id_controle_proposta_pac = p.id_controle_proposta_pac)
                            Group by convert(varchar(10),data_da_solicitacao,121), convert(varchar(2),data_da_solicitacao,114)
                            Order by 1');

    $arrHora = array();
    $arrQtdHora = array();
    $i = 0;
    foreach ( $result as $r )
    {
        $arrHora[$i] = $r->hora;
        $arrQtdHora[$i] = $r->qtdHora;
        $i++;
    }
        $chart = new Chart;
        $chart->labels($arrHora);
        $chart->dataset('Propostas Por Hora no dia de hoje','bar', $arrQtdHora)->backgroundColor('#64b5f6');
        $chart->options([
            'responsive' => true,
            'legend' => ['display' => true],
            'tooltips' => ['enabled'=>true],
            //'aspectRatio' => 1,
            'scales' => [
                'yAxes'=> [[
                            'display'=>false,
                            'ticks'=> ['beginAtZero'=> true],
                            'gridLines'=> ['display'=> false],
                          ]],
                'xAxes'=> [[
                            'categoryPercentage'=> 0.8,
                            //'barThickness' => 100,
                            'barPercentage' => 1,
                            'ticks' => ['beginAtZero' => true],
                            'gridLines' => ['display' => false],
                          ]],
            ],
            'plugins' => '{datalabels: {color: \'red\'}}',
        ]);
        return view('dashboard',compact('chart'));
    }
}

/ *查看* /

@extends('layout.main')
@section('titulo','Pac - DashBoard')
@section('conteudo')
<div class="row">
    <div class="col s6 col m12 l12">
        <div class="x_panel">
            <div class="x_title">
                <div class="col s6 m6 l6"><h2>Propostas do dia</h2></div>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="display: block;">
                <div class="row">
                    <div class="row top_tiles" id="card-0"></div>
                    <div class="row">
                        <div class="col s4 m7 l7">
                            <div id="graph-0" class="x_panel" style="height: 250px">   
                                <!--<canvas id="bar-0" style="width: 70% !important;height: auto !important;">-->
                                 {!! $chart->container() !!} 
                                @foreach($chart->plugins as $plugins)
                                        @include($chart->pluginsViews[$plugins])
                                  @endforeach 

                                <!--</canvas>-->
                            </div> 
                        </div> 
                        <div class="col s3 m5 l5">
                            <div id="graph-1" class="x_panel">
                                <canvas id="pie-1" style="width: 100% !important;height: auto !important;"></canvas>
                            </div> 
                        </div> 
                    </div> 
                </div>
            </div>
        </div>
    </div>
</div>
{!! $chart->script() !!}
@endsection

如何在chartjs和laravel chart consoletvs / chartsjs中使用插件

2 个答案: