Как получить данные из БД на диаграмме js с помощью Laravel? - PullRequest
Новая
       8

Как получить данные из БД на диаграмме js с помощью Laravel?

0 голосов
/ 10 июля 2020

Я хочу показать данные из базы данных на диаграмме, и я показал ответ возврата, который мне нужно получить на диаграмме, но я не знаю, как это сделать, есть ли у кого-нибудь идея?

Возврат ответ: 

[
  "Joylinkhk: 13,",
  "HorizonTechnologies: 2,",
  "Alahazrat: 9,",
  "j2w: 0,"
]

Скрипт диаграммы: 

<script>
 
  var barChartData = {
    labels: ['Joylinhk', 'HorizonTechnologies','Alahazrat','j2w'],
    datasets: [{
      label: "",
      backgroundColor: window.chartColors.blue,
      data: [13, 2,9,0],
    }
              ]
  };
  window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myBar = new Chart(ctx, {
      type: 'bar',
      data: barChartData,
      options: {
        title: {
          display: true,
          text: 'Project Report Chart'
        }
        ,
        tooltips: {
          mode: 'index',
          intersect: false
        }
        ,
        responsive: true,
        scales: {
          xAxes: [{
            stacked: true,
          }
                 ],
          yAxes: [{
            stacked: true
          }
                 ]
        }
      }
    }
   );
  };
</script>

1 Ответ

0 голосов
/ 10 июля 2020

Я делаю это более одного раза, прежде всего вы должны включить диаграмму Google в свой файл Blade

Давайте посмотрим Функция контроллера, которая возвращает данные в диаграмму Я делаю функцию с именем getAreaChart()

public function getAreaChart():array {
        $data = DB::table('companies')->get();
        $array[]=['area','counts'];
        foreach ($data as $key=>$da):
            $array[++$key] = [Area::find($da->area)->area,intVal($da->count)];
        endforeach;
        return $array;
    }

для функции, которая возвращает данные для просмотра и отображения на диаграмме, я вызываю функцию и не забываю json_encode результат 

 public function home()
    {
        $array = $this->getAreaChart();
        return view('admin.home')->with('companies', json_encode($array));;
    }

в файле лезвия, я делаю div с идентификатором pie_chart 

<div id="pie_chart" style="width:510px; height:408px;background: transparent">

, и сценарий должен быть таким 

<script type="text/javascript">
        var analytics = <?php echo $companies; ?>

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

        google.charts.setOnLoadCallback(drawChart);

        function drawChart()
        {
            var data = google.visualization.arrayToDataTable(analytics);
            var options = {
                title : ''
            };
            var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
            chart.draw(data, options);
        }
    </script>

Вы можете изменить диаграмму, изменив значение corechart см. документ диаграммы Google, это пример, за которым я следую Документы Google Charts 

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

и это типы диаграмм Google Типы диаграмм Google

Надеюсь, это полезно;)

счастливый код

...