如何使用javascript显示数据库数据

Question

 <script type="text/javascript"> var data = { labels: ['January', 'February', 'March', 'April'], datasets: [ { fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [30, 50, 75, 59] }, ] }; var context = document.querySelector('#graph').getContext('2d'); new Chart(context).Line(data); </script>

 <canvas id="graph" width="400" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

 public function tracker() { $statistics = DiraStatistics::all(); return view('AltHr.Chatbot.tracker', compact('statistics')); }

大家好，我是 javascript 新手，我想知道如何查看替换“标签（一月、二月、三月）”和“数据（30,50,75）”的数据。

我在 laravel 中这样做，但在我的控制器中我将数据库值称为：

我需要列中的标签：date_access 和列中的数据：question_asked

我会很感激你的帮助谢谢

身份证 | 日期访问| 提问

1 | 2017-09-25 | 9

2 | 2017-09-26 | 5

..

Answer 1

使用fetch api，您的代码可能如下所示：

fetch("someurl")//assuming get request, you need post then you need to pass a config object
.then(response => response.json())
.then(
  json => ({
    labels: json.months,//this depends on your json data

    datasets: [
      {
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: json.data//this depends on your json data
      }
    ]
  })
)
.then(
  data => {
    var context = document.querySelector('#graph').getContext('2d');    
    new Chart(context).Line(data);        
  }
)

如果你想支持旧浏览器，你需要一个polyfill

可以在此处找到 fetch api 的示例。

你的数据可以来自laravel restfull 资源控制器

Answer 2

你能试试这个哥们吗？

控制器

    public function tracker()
      {
        $statistics = DiraStatistics::all();
        labels = [];
        data =[];
        foreach ($statistics as $key => $statistic) {
            labels=  $statistic->date_access;
            data =  $statistic->question_asked;
        }
         return view('AltHr.Chatbot.tracker', compact('labels','data'));
      }

js 在刀片中。

<script type="text/javascript">

      var data = {
      labels: ['{{ $labels[0] }}', '{{ $labels[1] }}', '{{ $labels[2] }}', '{{ $labels[3] }}'],

      datasets: [
        {
          fillColor: "rgba(220,220,220,0.2)",
          strokeColor: "rgba(220,220,220,1)",
          pointColor: "rgba(220,220,220,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: ['{{ $data[0] }}', '{{ $data[0] }}', '{{ $data[0] }}', '{{ $data[0] }}']
        },
      ]
    };

    var context = document.querySelector('#graph').getContext('2d');

    new Chart(context).Line(data);

</script>