Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

嗨，大家好，我是新手javascript我想知道如何查看数据替换＆＃34;标签（jan，feb，march）＆＃34;和＆＃34;数据（30,50,75）＆＃34;。

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

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

感谢您的帮助，谢谢

id | 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的示例here。

您的数据可以来自laravel restfull resource controllers

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>

如何使用javascript

id | date_access | question_asked

1 | 2017-09-25 | 9

2 个答案: