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

chart.js官方文档

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

分析一下结构

选中部分就是一个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>
---
后端不给了,尊重劳动
点赞