逐梦者
逐梦者

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

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

chart.js官方文档

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

分析一下结构

https://www.xnpu.top/wp-content/uploads/2021/02/Snipaste_2021-02-06_10-54-44.png

选中部分就是一个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>
后端不给了,尊重劳动
没有标签
首页      未分类      使用chart.js +自定义api接口生成图表

发表评论

textsms
account_circle
email

Captcha Code

逐梦者

使用chart.js +自定义api接口生成图表
chart.js官方文档 阅读文档后我们发现,其实也是比较简单的 分析一下结构 选中部分就是一个json格式的数据,我们完全可以自定义一个api接口去生成。 不必要用前端去组合…
扫描二维码继续阅读
2021-02-06