Laravel 5 Chart Js 在刀片模板错误中渲染多个图表答案

【问题标题】：Laravel 5 Chart Js rendering multiple charts in blade template errorLaravel 5 Chart Js 在刀片模板错误中渲染多个图表
【发布时间】：2018-05-03 19:30:22
【问题描述】：

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

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>

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

【问题讨论】：

标签： laravel charts chart.js blade

【解决方案1】：

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

在你上面的例子中，你有两个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([]);

【讨论】：