javascript - 将Laravel5.0中的Google图表与mysql数据库中的数据集成

我想在laravel5.0应用程序中集成G​​oogle图表。数据在mysql数据库中。到目前为止，我已经完成了通过互联网进行的研究

控制器部分

    public function index(){

    $barChart= DB::table('clients')
        ->select('clients.ClientName','clients.Price')
        ->get();
    $bar = json_encode($barChart);
    return view('home')
        ->with('bar', $bar);
}

如果我打印$ bar，结果是

[{"ClientName":"nayeem","Price":1000},{"ClientName":"Tusher","Price":1000},
{"ClientName":"Nirjon","Price":1000},{"ClientName":"Remon","Price":1000},
{"ClientName":"Navid","Price":1000},{"ClientName":"Erfan","Price":1000},
{"ClientName":"Sazzad","Price":1000},{"ClientName":"Farin","Price":2000},
{"ClientName":"Arman","Price":1000},{"ClientName":"Sohan","Price":1000},
{"ClientName":"romi vai","Price":9000},{"ClientName":"tasif","Price":1000},
{"ClientName":"trina","Price":1000},{"ClientName":"Nuru Vai","Price":1000}]

查看零件

<div class="panel-body" id="barChart"> </div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
   google.load('visualization', '1', {'packages':['corechart']});
   google.setOnLoadCallback(drawChart);
   function drawChart() {
      var data = new google.visualization.DataTable(<?=$bar?>);
      var options = {
      title: 'My Bar chart',
      is3D: 'true'
   };
   var chart = new  google.visualization.PieChart(document.getElementById('barChart'));
   chart.draw(data, options);
   }

但是它显示“表没有列”。我知道我没有创建任何列，而且我也了解仅编写此google.visualization.DataTable(<?=$bar?>)不会创建任何列。我尝试了多种创建列的方法，但是找不到任何解决方案。如何从中创建数据表？

我也尝试过chartWraper

<script type="text/javascript">
    google.load('visualization', '1.0');
    function drawInventoryChart() {
        var wrapper = new google.visualization.ChartWrapper({
            chartType: 'ColumnChart',
            dataTable: [], //don't know how to put $bar here
            option: {title: 'test'}
        });
        wrapper.draw('barChart');
    }
    google.setOnLoadCallback(drawInventoryChart);
</script>

这也行不通，因为我无法正确使用dataTable[]的值。

最佳答案

您可以使用array.forEach将数据加载到数据表中。

请参阅以下示例...

google.charts.load('current', {
  callback: function () {

    // use the following
    //var sqlData = <?=$bar?>;

    // for example
    var sqlData = [
      {"ClientName":"nayeem","Price":1000},{"ClientName":"Tusher","Price":1000},
      {"ClientName":"Nirjon","Price":1000},{"ClientName":"Remon","Price":1000},
      {"ClientName":"Navid","Price":1000},{"ClientName":"Erfan","Price":1000},
      {"ClientName":"Sazzad","Price":1000},{"ClientName":"Farin","Price":2000},
      {"ClientName":"Arman","Price":1000},{"ClientName":"Sohan","Price":1000},
      {"ClientName":"romi vai","Price":9000},{"ClientName":"tasif","Price":1000},
      {"ClientName":"trina","Price":1000},{"ClientName":"Nuru Vai","Price":1000}
    ];

    // create data table
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Client');
    data.addColumn('number', 'Price');

    // load data table
    sqlData.forEach(function(row) {
      data.addRow([row.ClientName, row.Price]);
    });

    var chart = new google.visualization.BarChart(document.getElementById('barChart'));
    chart.draw(data, {
      title: 'My Bar chart',
      is3D: 'true'
    });
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barChart"></div>

关于javascript - 将Laravel5.0中的Google图表与mysql数据库中的数据集成，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37026155/