Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
.zhexiantu {
	position:relative;
}
.zhexiantu .y_zhou li {
	width:100%;
	position:relative;
}
/* .zhexiantu .y_zhou li .text {
	vertical-align:bottom;
	align-items:flex-end;
	display:flex;
	height:100%;
	width:50px;
	text-align:right;
}
*/
        		.zhexiantu .y_zhou li .text {
	position:absolute;
	width:50px;
	text-align:right;
	top:100%;
	line-height:30px;
	margin-top:-15px;
	box-sizing:border-box;
	padding-right:5px;
}
.zhexiantu .y_zhou li .xian {
	width:800px;
	margin-left:50px;
	border-left:1px solid #ddd;
	border-bottom:1px solid #ddd;
	height:100%;
	box-sizing:border-box
}
.zhexiantu .x_zhou {
	margin-left:50px;
}
.zhexiantu .x_zhou li {
	height:auto;
	float:left;
	word-wrap:break-word;
	word-break:break-all;
	overflow:hidden;
	box-sizing:border-box;
	text-align:center
}
.zhexiantu .xianduan_box {
	position:absolute;
	width:100%;
	box-sizing:border-box;
	padding-left:50px;
	top:0;
	left:0
}
.zhexiantu .xianduan_box .xianduan {
	position:relative;
	width:100%;
	height:100%;
}
.zhexiantu .xianduan_box .xianduan p {
	position:absolute;
	transform-origin:left bottom;
	width:60px;
	height:2px;
	background:#ccc
}
.zhexiantu .dian_box {
	position:absolute;
	width:100%;
	box-sizing:border-box;
	padding-left:50px;
	top:0;
	left:0
}
.zhexiantu .dian_box .dian {
	position:relative;
	width:100%;
	height:100%;
}
.zhexiantu .dian_box .dian span {
	display:block;
	position:absolute;
	width:6px;
	height:6px;
	overflow:hidden;
	background:#ccc;
	box-sizing:border-box;
	border-radius:50%;
	cursor:pointer
}
.xianqing {
	position:fixed;
	border:1px solid #999;
	background:#fff;
	font-size:14px;
	display:inline-block;
	padding:5px 10px;
	opacity:0;
	transition:all 0.5s
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.8.3
 立即下载

折线图(原创)

var y_itme =5   //分的份数

var y_munlength = 300 //y轴的长度

.zhexiantu .y_zhou li .xian  的 width:800px x轴的长度

var y = [y轴的值]

var x = [x轴的值]


0