使用chart.js +自定义api接口生成图表

阅读文档后我们发现，其实也是比较简单的

分析一下结构

选中部分就是一个json格式的数据，我们完全可以自定义一个api接口去生成。

不必要用前端去组合，（~~其实是我不会前端）~~

花费了三天时间摸出来了方法：

前端：使用了ajax 和引入chart.js 可以自行修改

<html lang="en">

<head>

<meta http-equiv="Content-Type" charset="UTF-8" />

<style>

body{text-align:center}

.divcss5{margin:10px auto;width:400px;height:100px;border:0px solid #000}

</style>

</head>

<body>

<div class="divcss5"><canvas id="chart"></canvas></div>

<div style="width:800px;height:800px"><canvas id="myChart"></canvas></div>

<script src="/Chart.min.js"></script>

<script src="/jquery.min.js"></script>

<script>

$(function(){

$.ajax({

type: "GET",//请求方式

url: "",//地址，就是json文件的请求路径

dataType: "json",//数据类型可以为 text xml json script jsonp

            success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数

console.log(result)

const ctx = document.getElementById("myChart");

var chart = new Chart(ctx,result);

}

})

</script>

</body>

</html>

—

后端不给了，尊重劳动