初学者用javascript写统计图框架

最新推荐文章于 2021-03-12 17:29:19 发布

我是一株草我有三颗心

最新推荐文章于 2021-03-12 17:29:19 发布

阅读量342

点赞数 1

分类专栏： HTML5+Css3 文章标签： html5 html javascript

本文链接：https://blog.csdn.net/weixin_44576310/article/details/104286786

版权

本文档介绍了一个专为初学者设计的简单HTML折线图框架，利用JavaScript实现。通过示例代码，展示如何创建并布局图表，包括头部、侧边栏、主体和尾部元素，以及绘制折线图的方法。

摘要由CSDN通过智能技术生成

自己写的，因为自己还不是很厉害所以就完成了简陋的html折线统计图的框架,提供初学者学习了解javascript的使用

/*BrokenLineStatisticalChart*/
var BrokenLineStatisticalChart_FatherObj; //父对象
var BrokenLineStatisticalChart_FatherObj_style; //父对象的Style(只读)
var log; //用于提示

/*创建图表*/
function CreateTable() {
   option = {
       xAxis: {
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Wed', 'Thu', 'Fri', 'Satss', 'Suns', 'Fri', 'Sat', 'Sun']
       },
       series: {
           data: [120, 58, 90, 80, 70, 110, 105, 70, 110, 130, 130, 400, 110, 130]
       },
       Config: {
           type: 'config',
           Color: "#1E90FF",
           Circle: [5]
       }
   };
   return option;
   //BrokenLineStatisticalChart("id",option);参考使用方法
}

//初始化布局
function BrokenLineStatisticalChart(id,option) {
   log = document.getElementById("log");
   BrokenLineStatisticalChart_FatherObj = document.getElementById(id); //父对象
   BrokenLineStatisticalChart_FatherObj_style = getComputedStyle(BrokenLineStatisticalChart_FatherObj, id);
   var FatherObj = BrokenLineStatisticalChart_FatherObj; //名称太长所以

   var FatherObjchild = BrokenLineStatisticalChart_FatherObj.childNodes;
   if(FatherObjchild.length>0){
       for(var i=0;i<FatherObjchild.length;i++){
           FatherObjchild[i].remove();
       }
   }

   var header_ = document.createElement("header");
   header_.id = "Head"; //头部header
   header_.style.width = "100%";
   header_.style.height = "20%";
   header_.style.margin = "0";
   FatherObj.appendChild(header_);
   var aside_ = document.createElement("aside");
   aside_.id = "Aside"; //侧边栏aside
   aside_.style.width = "10%";
   aside_.style.height = "70%";
   aside_.style.margin = "0";
   aside_.style.float = "left";
   FatherObj.appendChild(aside_);
   var section_ = document.createElement("section");
   section_.id = "Section"; //主体section
   section_.style.width = "90%";
   section_.style.height = "70%";
   section_.style.margin = "0";
   section_.style.float = "left";
   FatherObj.appendChild(section_);
   var footer_ = document.createElement("footer");
   footer_.id = "Footer"; //尾体footer
   footer_.style.width = "100%";
   footer_.style.margin = "0";
   footer_.style.height = "10%";
   footer_.style.clear = "left";
   FatherObj.appendChild(footer_);
   var SectionStyle = getComputedStyle(section_, "#Section");