Laravel

Question

我创建了一个折线图，其中显示了某个日期的总销售额，但它 return 出现错误 'Data column(s) for axis #0 cannot be of type string'。我检查了我的视图源，它 return 是我折线图的正确数据。我真的不知道出了什么问题。谁能帮我解决这个问题，如何显示图表？

我的viewsource数据

["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));
    }
}
?>

我的blade

<!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>

Answer 1

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

删除每行中第二个值周围的引号，
改变...

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

到...

["18th April 2020",64.50]

此外，arrayToDataTable 有第二个可选的布尔参数...

opt_firstRowIsData - Whether the first row defines a header row or not. If true, all rows are assumed to be data. If false, the first row is assumed to be a header row, and the values are assigned as column labels. Default is false.

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

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

Laravel - Google 折线图未显示

Laravel - Google line chart not displaying

charts

google-visualization