阅读文档后我们发现,其实也是比较简单的
分析一下结构
选中部分就是一个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>
—
后端不给了,尊重劳动
发表回复