数据可视化利用Chart.js图表工具简单案例展示

最新推荐文章于 2023-06-02 10:56:35 发布

孜孜孜孜不倦

最新推荐文章于 2023-06-02 10:56:35 发布

阅读量1.1k

点赞数

分类专栏：数据可视化文章标签： Chart.js 数据可视化简单案例

本文链接：https://blog.csdn.net/z_ipython/article/details/94740436

版权

数据可视化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

数据可视化

Chart
Echart
- 使用HTML+js绘制图表
Restful
- 网站接口
- Json 是在web服务直接传到的一种数据类型，类似python的字典
Ajax 局部提交,只是提交一部分网页，数据通过js返回

使用Chart.js和jquery.js
数据提供：

import random
import time
import json

now = time.strftime("%H:%M:%S",time.localtime())

num = random.randint(1,10)

result = {"now":now,"num":num}

json_result = json.dumps(result)  # 字典转换为json数据

print("content-type:application/json")  # 返回响应的头部，具体描述的要返回的内容类型，在cgi当中用print进行返回
print("\n")  # 返回头部结束
print(json_result)  # 返回响应的body

html可视化文档：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数据可视化</title>
        <style type="text/css">
            button{
                margin-left: 150px;

            }
        </style>
        <script src="js/jquery-3.1.1.min.js"></script>  <!--导入jQuery文件-->
        <script src="js/Chart.min.js"></script>  <!--导入chart可视化文件-->
    </head>

    <body>
        <canvas id="panel" height="330px" width="500px"> <!--画布布局-->

        </canvas>
        <div>
            <button id="btdn1">开始</button>
            <button id="btdn2">暂停</button>
        </div>
        <script>
            $(
                function () {
                    var can = $("#panel").get(0).getContext("2d");//设置为2d画布
                    var canData = {
                        labels:["a","b","c","d","e","f"],//x轴的坐标
                        datasets:[
                            {
                                fillColor:"rgba(255,0,255,0.2)",//线条下的填充色
                                strokeColor:"rgba(0,255,0,1)",//线条颜色
                                data:[1,2,3,1,2,5] //y轴对应x轴的数据

                            }

                        ]
                    };
                    var line = new Chart(can).Line(canData);
                    $("#btdn1").click(
                        function () {
                            Inter=setInterval(
                                function () {
                                    $.ajax( //局部提交，只是提交一部分网页，数据通过js返回
                                        {
                                            type:"get",//ajax请求的类型
                                            url:"/cgi-bin/data.py",//ajax请求的地址,动态获取数据，数据由/cgi-bin/data.py提供
                                            data:"",//请求需要携带的数据
                                            success:function (data) {
                                                line.addData(
                                                    [data["num"]],
                                                    data["now"]
                                                );
                                                var len = line.datasets[0].points.length;//获取点个数
                                                if(len > 8){
                                                    line.removeData()
                                                }
                                            },//回调函数，如果请求成功，ajax自动调用当前函数，将返回结果传递给data
                                            error:function (error) {
                                                console.log(error)
                                            }//回调函数，如果请求失败，ajax自动调用当前函数，将返回错误传递给error
                                        }
                                    )//使用ajax
                                },1000
                            )

                    $("#btdn2").click(
                        function () {
                            clearInterval(Inter);
                        }
                    )
                        }
                    )

                }
            )

        </script>

    </body>
</html>

效果：
在这里插入图片描述

孜孜孜孜不倦

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
数据可视化利用Chart.js图表工具简单案例展示

数据可视化ChartEchart使用HTML+js绘制图表Restful网站接口Json 是在web服务直接传到的一种数据类型，类似python的字典Ajax 局部提交,只是提交一部分网页，数据通过js返回使用Chart.js和jquery.js数据提供：import randomimport timeimport jsonnow = time.strf...
复制链接

扫一扫