类似心电图的报表

在即将离职上家东家的时候,程序部一同事在网上找了很久没有找到设计师设计的那类样式的报表,于是我当天给他写了个雏形,这个周末整理了一下,但还有我想要的功能没有加上,后面有时间继续添加,但是现在这个依旧可以用,若有不足,欢迎留言评论。

先看下截图

参数:

        "canvansWrapper":'',   //包裹canvans的盒子id
        "canvansId":'',        // canvans的id
        "height":400,          //canvans高度,基线位置
        "data":null,           //数据-->数组
        "title":{
            "textAlign":"center",  //文本对其方式
            "unit":null,           //单位
            "firstTitle":{         //大标题
                "text":"大标题",   //大标题文本
                "font":"14px '微软雅黑'",   //大标题字体大小和字体样式
                "color":"#000"     //大标题颜色
            },
            "secondTitle":{
                "text":"小标题",             //小标题文本
                "font":"12px '微软雅黑'",    //小标题字体大小和字体样式
                "color":"rgba(0,0,0,0.85)"   //小标题颜色
            }
        }
调用:
html:
<div class="canvansBox" id="canvansBox">
    <canvas id="canvas"></canvas>
</div>
js:
    new heartChart().init({
        "canvansWrapper":'canvansBox',
        "canvansId":'canvas',
        "height":300,
        "data":datatest,
        "title":{
            "textAlign":"center",
            "unit":"次",
            "firstTitle":{
                "text":"大标题",
                "font":"14px '微软雅黑'",
                "color":"#000"
            },
            "secondTitle":{
                "text":"转载数:",
                "font":"12px '微软雅黑'",
                "color":"rgba(0,0,0,0.85)"
            }
        }
下载地址

猜你喜欢

转载自blog.csdn.net/skyblacktoday/article/details/79445159
今日推荐