【问题标题】:Laravel - Google line chart not displayingLaravel - 谷歌折线图不显示
【发布时间】:2020-07-17 04:28:08
【问题描述】:

我创建了一个折线图,其中显示了按日期显示的总销售额,但它返回错误“轴 #0 的数据列不能是字符串类型”。我检查了我的视图源,它为我的折线图返回了正确的数据。我真的不知道有什么问题。谁能帮我解决一下如何显示图表?

我的浏览量数据

["18th April 2020","64.50"],["19th April 2020","91.00"],["20th April 2020","644.70"],["21st April 2020","120.50"]

我的控制器

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class LaravelGoogleGraph extends Controller
{

  function index()
    {
      $data = DB::table('booking_detail')
        ->select(
            DB::raw('sum(total_price) as sums'), 
            DB::raw("DATE_FORMAT(date_sell,'%D %M %Y') as months"))
        ->groupBy('months')
        ->get();
     $array[] = ['Date', 'Sales'];
     foreach($data as $key => $value)
     {
      $array[++$key] = [$value->months, $value->sums];
     }
     return view('google_pie_chart')->with('months', json_encode($array));
    }
}
?>

我的刀

<!DOCTYPE html>
<html>
  <head>
      <title>Make Google Pie Chart in Laravel</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
      <style type="text/css">
       .box{
        width:600px; height:400px;
       }
      </style>
      <script type="text/javascript">
       var analytics = <?php echo $months; ?>

       google.charts.load('current', {'packages':['corechart']});

       google.charts.setOnLoadCallback(drawChart);

       function drawChart()
       {
        var data = google.visualization.arrayToDataTable(analytics);
        var options = {
         title : 'Booking Sales'
        };
        var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
        chart.draw(data, options);
       }
      </script>
  </head>
 <body>
  <br />
  <div class="container">
   <h3 align="center">Booking Report</h3><br />
   
   <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">Booking Sales</h3>
    </div>
    <div class="panel-body" align="center">
     <div id="line_chart" style="width:550px; height:350px;">

     </div>
    </div>
   </div>
   
  </div>
 </body>
</html>

【问题讨论】:

  • 我已经解决了,看起来我的总和返回值是字符串而不是 int/float。我在控制器 $array[++$key] = [$value->months, $value->sums+=0]; 的数组语句中添加“+=0”

标签: laravel charts google-visualization


【解决方案1】:

该行的值应该是数字,而不是字符串...

删除每行中第二个值周围的引号,
换...

["18th April 2020","64.50"]

到...

["18th April 2020",64.50]

另外,arrayToDataTable 有第二个可选的布尔参数...

opt_firstRowIsData - 第一行是否定义标题行。如果为真,则假定所有行都是数据。如果为 false,则假定第一行是标题行,并且将值分配为列标签。默认为假。

如果数组的第一行不代表列标题,
那么你应该将true 作为第二个参数,在这里...

var data = google.visualization.arrayToDataTable(analytics, true);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-22
    • 2013-04-28
    • 2015-12-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多