communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > JS 柱形图

JS 柱形图

巴扎黑
Libérer： 2016-11-25 14:24:20
original
1088 Les gens l'ont consulté

<!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>
Copier après la connexion

Étiquettes associées：
Diagramme à colonnes
source：php.cn
Article précédent：路径描边设置样式 Article suivant：JavaScript 实现隐藏省略文字特效
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Dans Angular, puis-je intégrer une arborescence dans l'éditeur de documents Syncfusion en cliquant sur un bouton ? J'ai créé un bouton personnalisé dans la barre d'outils de l'éditeur de documents Syncfusi...
Depuis 2024-04-01 09:18:00
0
1
284
Créez une bordure circulaire autour d'une image à l'aide de la propriété CSS Clip-path:circle() Je veux savoir comment ajouter une bordure dans l'image clip-path:circle(); Existe-t-il un...
Depuis 2024-03-31 17:35:30
0
1
410
Créez des panneaux de signalisation évolutifs en utilisant HTML, CSS et SVG Je souhaite réaliser un bouton en forme de panneau (un rectangle avec une pointe). _______...
Depuis 2024-03-31 14:45:14
0
1
294
La validation de l'image ne fonctionne pas avec yup validate J'essaie d'utiliser yup pour la vérification. Obligatoire ne s’applique pas aux images. im...
Depuis 2024-03-30 16:09:36
0
1
385
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal