Exemple de code du composant graphique JavaScript pur dhtmlxChart-js tutoriel-php.cn

Exemple de code du composant graphique JavaScript pur dhtmlxChart

黄舟

Libérer： 2017-03-16 14:39:55

original

1508 Les gens l'ont consulté

PureJavaScriptExemple de code du composant graphique dhtmlxChart

dhtmlxChart est également un JavaScript- based Le composant d'application graphique est similaire au xCharts partagé auparavant. dhtmlxChart fournit également un type de graphique très riche, par rapport à xCharts, il fournit plus de types de graphiques, notamment des diagrammes circulaires, des graphiques radar, Tracés de points discrets et types de graphiques plus complexes. dhtmlxChart propose une version open source, mais sa version commerciale coûte plus de 49 $, ce qui est un peu cher.

La configuration de dhtmlxChart

Citer le jsscript et les fichiers css associés de dhtmlx sur la page pour terminer l'installation :

<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>

Copier après la connexion

Le chemin est à modifier par vous-même.

De plus, dhtmlxChart fournit 4 formats de sources de données, prenant en charge XML, JSON, CSV et JSarray, en prenant XML comme exemple :

window.onload = function(){
        var barChart =  new dhtmlXChart({
            view:"bar",
            container:"chartp",
            value:"#sales#",
            gradient:"falling",
            color:"#b9a8f9",
            radius:0,
            alpha:0.5,
            border:true,
            width:70,
            xAxis:{
                template:"#year#"
            },
            yAxis:{
                start:0,
                end:100,
                step:10,
                template:function(obj){
                    return (obj%20?"":obj)
                }
            }
        })
        barChart.load("../common/data.xml");
	}

Copier après la connexion

Génération d'histogrammes dhtmlxChart

window.onload = function(){
	var barChart1 =  new dhtmlXChart({
		view:"bar",
		container:"chart1",
	    value:"#sales#",
        label:"&#39;#year#",
        barWidth:35,
        radius:0,
        gradient:"rising"
	})
	barChart1.parse(dataset,"json");
	barChart1.attachEvent("onItemClick",function(id){alert(id)})
	var barChart2 =  new dhtmlXChart({
		view:"bar",
		container:"chart2",
	    value:"#sales#",
        label:"&#39;#year#",
        color:"#66ccff",
        gradient:"rising",
        barWidth:25,
        padding:{
            top:50,
            bottom:0,
            right:50,
            left:50
        }
	});
	barChart2.parse(dataset,"json");
	}

Copier après la connexion

Le format de données json est utilisé ici.

Le rendu est le suivant :

Génération de carte de points radar dhtmlxChart

var chart =  new dhtmlXChart({
            container:"chartp",
            view:"radar",
			value:"#companyA#",
            disableLines:true,
			item:{
                borderWidth:0,
                radius:2,
				color: "#6633ff"
			},
			xAxis:{
				template:"#month#"
			},
			yAxis:{
				lineShape:"arc",
                bg:"#fff8ea",
                template:function(value){
                    return parseFloat(value).toFixed(1)
                }
			}
        });
        chart.parse(companies,"json");

Copier après la connexion

Le rendu est le suivant :

Génération de graphiques à points discrets dhtmlxChart

chart =  new dhtmlXChart({
            view:"scatter",
			container:"chartp",
	    	value:"#b#",
			xValue: "#a#",
            yAxis:{
                title:"Value B"
            },
            xAxis:{
                title:"Value A"
            },
            tooltip:{
              template:"#a# - #b#"
            },
            item:{
                radius:5,
                borderColor:"#f38f00",
                borderWidth:1,
                color:"#ff9600",
                type:"d",
                shadow:true
            }
        });
		chart.parse(scatter_dataset,"json");

Copier après la connexion

Le rendu est le suivant :

L'utilisation de les autres types de graphiques sont similaires, dhtmlxChart. La plus grande fonctionnalité est qu'il prend en charge les formats de données les plus populaires en tant que données graphiques, ce qui le rend très pratique à utiliser pour nos développeurs. Vous pouvez essayer la version gratuite open source de dhtmlxChart.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!