masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > JS 柱形图

JS 柱形图

巴扎黑
Lepaskan： 2016-11-25 14:24:20
asal
1088 orang telah melayarinya

<!doctype html>
<meta charset="utf-8"/>
<head>
<script type="text/javascript">
var dataSet = {
    "第一月份":95,
    "第二月份":20,
    "第三月份":84,
    "第四月份":77,
    "第五月份":90,
    "第六月份":100
}
var markPollarChart= function(parent,dataset){
    var p = document.createElement("div"),
    builder = [];
    builder.push("<ul class=&#39;chart&#39;>");
    for(var i in dataset){
        builder.push("<li><em>") ;
        builder.push(i) ;
        builder.push("</em><span style=&#39;background-position: center -") ;
        builder.push(dataset[i]) ;
        builder.push("px&#39;></span><strong>") ;
        builder.push(dataset[i]) ;
        builder.push("%</strong></li>") ;
    }
    builder.push("</ul>");
    p.innerHTML = builder.join(&#39;&#39;);
    parent.insertBefore(p,null);
}
window.onload = function(){
    markPollarChart(document.getElementsByTagName("body")[0],dataSet);
}
</script>
<style type="text/css">
.chart {
list-style: none;
font-family: &#39;宋体&#39;;
font-size: 14px;
border: 1px solid #ccc;
margin: 0;
padding: 5px;
background: #F2F1D7;
float: left;
}
.chart li {
width: 75px;
height: 140px;
float: left;
background: #DDF3FF url(img/o_pillar.gif) center center repeat-y;
}
.chart li em, .chart li span, .chart li strong {
display: block;
height: 20px;
text-align: center;
}
.chart li em, .chart li strong {
background: #DDF3FF;
}
.chart li span {
height: 100px;
background: transparent url(img/o_mask.jpg) no-repeat;
}
</style>
<head>
<body>
</body>
Salin selepas log masuk

Label berkaitan：
Carta lajur
sumber：php.cn
Artikel sebelumnya：路径描边设置样式 Artikel seterusnya：JavaScript 实现隐藏省略文字特效
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Dalam Angular, bolehkah saya menyepadukan paparan pokok ke dalam editor dokumen Syncfusion pada klik butang? Saya mencipta butang tersuai dalam bar alat editor dokumen penyegerakan dan menamakannya p...
daripada 2024-04-01 09:18:00
0
1
284
Cipta sempadan bulat di sekeliling imej menggunakan sifat CSS Clip-path:circle() Saya ingin tahu cara menambah sempadan dalam clip-path:circle(); Adakah terdapat cara lain...
daripada 2024-03-31 17:35:30
0
1
410
Buat papan tanda berskala menggunakan HTML, CSS dan SVG Saya ingin membuat butang dalam bentuk papan tanda (segi empat tepat dengan hujung). _____...
daripada 2024-03-31 14:45:14
0
1
294
Pengesahan imej tidak berfungsi dengan yup validate Saya cuba menggunakan yup untuk pengesahan. Diperlukan tidak digunakan pada imej. imej:yup...
daripada 2024-03-30 16:09:36
0
1
385
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan