Laravel 5 Chart Js 在 blade 模板错误中呈现多个图表

Question

我正在尝试将多个图表添加到 blade 模板，但不幸的是没有成功。

Laravel版本：5.6 包裹： https://github.com/fxcosta/laravel-chartjs

     $chartjs = app()->chartjs
            ->name('lineChartTest')
            ->type('line')
            ->size(['width' => 400, 'height' => 200])
            ->labels($date)
            ->datasets([
                [
                    "label" => "Gesammelte Coins",
                    'backgroundColor' => "rgba(38, 185, 154, 0.31)",
                    'borderColor' => "rgba(38, 185, 154, 0.7)",
                    "pointBorderColor" => "rgba(38, 185, 154, 0.7)",
                    "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)",
                    "pointHoverBackgroundColor" => "#fff",
                    "pointHoverBorderColor" => "rgba(220,220,220,1)",
                    'data' => $coins,
                ]
            ])
            ->options([]);

  $chartjs2 = app()->chartjs
          ->name('lineChartTest')
          ->type('line')
          ->size(['width' => 400, 'height' => 200])
          ->labels($date2)
          ->datasets([
              [
                  "label" => "Gesammelte Coins",
                  'backgroundColor' => "rgba(38, 185, 154, 0.31)",
                  'borderColor' => "rgba(38, 185, 154, 0.7)",
                  "pointBorderColor" => "rgba(38, 185, 154, 0.7)",
                  "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)",
                  "pointHoverBackgroundColor" => "#fff",
                  "pointHoverBorderColor" => "rgba(220,220,220,1)",
                  'data' => $coins2,
              ]
          ])
          ->options([]);    


      return view('vendor/voyager/dashboard', [

                                                 'chartjs' => $chartjs,
                                                 'chartjs2' => $chartjs2
     ]);

 //blade template
       <div style="background:#FFF; margin-top:20px;" class="col-md-6">
                   {!! $chartjs->render() !!}
                </div>
                <div style="background:#FFF; margin-top:20px;" class="col-md-6">
                  {!! $chartjs2->render() !!}
               </div>

我可以成功添加一个图表，但是当我尝试添加两个图表时，我得到的是一张空白图表。

Answer 1

我认为你需要更改 chartjs 的名称属性。

在您上面的示例中，您对 2 个 chartjs 使用了相同的名称。

所以，只需更改名称属性 :

第一个图表给了她名字：lineChartTestOne

 $chartjs = app()->chartjs
        ->name('lineChartTestOne')
        ->type('line')
        ->size(['width' => 400, 'height' => 200])
        ->labels($date)
        ->datasets([
            [
                "label" => "Gesammelte Coins",
                'backgroundColor' => "rgba(38, 185, 154, 0.31)",
                'borderColor' => "rgba(38, 185, 154, 0.7)",
                "pointBorderColor" => "rgba(38, 185, 154, 0.7)",
                "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)",
                "pointHoverBackgroundColor" => "#fff",
                "pointHoverBorderColor" => "rgba(220,220,220,1)",
                'data' => $coins,
            ]
        ])
        ->options([]);

第二张图表为她命名：lineChartTestTow

$chartjs2 = app()->chartjs
        ->name('lineChartTestTow')
        ->type('line')
        ->size(['width' => 400, 'height' => 200])
        ->labels($date)
        ->datasets([
            [
                "label" => "Gesammelte Coins",
                'backgroundColor' => "rgba(38, 185, 154, 0.31)",
                'borderColor' => "rgba(38, 185, 154, 0.7)",
                "pointBorderColor" => "rgba(38, 185, 154, 0.7)",
                "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)",
                "pointHoverBackgroundColor" => "#fff",
                "pointHoverBorderColor" => "rgba(220,220,220,1)",
                'data' => $coins,
            ]
        ])
        ->options([]);

Laravel 5 Chart Js 在 blade 模板错误中呈现多个图表

Laravel 5 Chart Js rendering multiple charts in blade template error

charts

laravel

blade

chart.js