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

风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”]，
数据集：[
{
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[30,50,75,59]
},
]
};
var context=document.querySelector（'#graph'）.getContext（'2d'）；
新图表（上下文）。线条（数据）；

使用您的代码可以如下所示：

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);        
  }
)

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

可以找到fetchapi的示例

---

你的数据可以来自

你能试试这个吗

控制器

    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>

风险值数据={
标签：[{$labels[0]}}'，{{$labels[1]}}'，{{$labels[2]}'，{{$labels[3]}}],，
数据集：[
{
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[{$data[0]}}'，{{$data[0]}}'，{{$data[0]}}'，{{$data[0]}'，{{$data[0]}}]
},
]
};
var context=document.querySelector（'#graph'）.getContext（'2d'）；
新图表（上下文）。线条（数据）；