Partage de l'effet du graphique à barres 2D dessiné par le plug-in jQuery FusionCharts

Cet article présente principalement l'effet des graphiques à barres 2D dessinés par le plug-in jQuery FusionCharts. Il analyse les étapes spécifiques et les techniques de fonctionnement associées de jQuery à l'aide du plug-in FusionCharts pour dessiner des graphiques à barres 2D avec un exemple complet. est également livré avec un code source de démonstration que les lecteurs peuvent télécharger pour référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela pourra aider tout le monde.

1. Idées de conception

(1) Comprendre certaines caractéristiques et points communs des graphiques à barres et maîtriser leurs caractéristiques

(2) Configurer des pages statiques et des sources de données selon la hiérarchie de conception FusionCharts

(3) Introduire des graphiques à barres et définir leurs propriétés ;

2. Étapes de conception

(1) Concevoir le script pour générer le graphique à barres

$(function(){
 var bar2D = new FusionCharts( "FusionCharts/Bar2D.swf", "myChartId", "100%", "540", "0" );
 bar2D.setXMLUrl("bar2D.xml");
 bar2D.render("bar2DChart");
});

(2) Concevoir la source de données

<?xml version="1.0" encoding="UTF-8"?>
<chart caption=&#39;(jb51.net统计)2016年动物饲养量&#39; xAxisName=&#39;动物名称&#39; yAxisName=&#39;饲养量&#39; showValues=&#39;1&#39; baseFontSize=&#39;12&#39; baseFontColor=&#39;#A45454&#39;
    dashed=&#39;1&#39; numpLines=&#39;40&#39; pLineColor=&#39;#0000FF&#39; pLineThickness=&#39;1&#39; pLineAlpha=&#39;50&#39; pLineIsDashed=&#39;1&#39; pLineDashLen=&#39;2&#39;
    formatNumber=&#39;1&#39; scaleRecursively=&#39;1&#39; outCnvBaseFont=&#39;#456454&#39; outCnvBaseFontSize=&#39;16&#39; outCnvBaseFontColor=&#39;#00FF00&#39; showToolTip=&#39;1&#39;
    toolTipBgColor=&#39;#565677&#39; toolTipBorderColor=&#39;#CCCCCC&#39; showToolTipShadow=&#39;1&#39; chartLeftMargin=&#39;5&#39; showLabel=&#39;1&#39;>
  <set label=&#39;猪&#39; value=&#39;9856456454&#39; />
  <set label=&#39;牛&#39; value=&#39;8754545554&#39; />
  <set label=&#39;羊&#39; value=&#39;5784554458&#39; />
  <set label=&#39;兔&#39; value=&#39;451545554&#39; />
  <set label=&#39;鸡&#39; value=&#39;7989565666&#39; />
  <vLine color=&#39;FF5904&#39; thickness=&#39;2&#39; dashed=&#39;1&#39; showLabelBorder=&#39;1&#39; labelVAlign=&#39;middle&#39; labelHAlign=&#39;center&#39;/>
  <set label=&#39;鸭&#39; value=&#39;5613265666&#39; />
  <set label=&#39;鹅&#39; value=&#39;784545555&#39; />
  <set label=&#39;蛇&#39; value=&#39;45412121&#39; />
  <set label=&#39;蛙&#39; value=&#39;656521&#39; />
  <set label=&#39;鱼&#39; value=&#39;7854656666&#39; />
</chart>

(3) Présenter le graphique à barres FusionCharts

<p id="bar2DChart"></p>

3. Exemple de code complet :

  <p id="bar2DChart"></p>

4. Rendu des opérations :

Recommandations associées :

Graphique à double barre 3D FusionCharts

Graphique combiné de diagramme à barres 2D et de diagramme linéaire FusionCharts

Exemple d'utilisation de diagramme php fusioncharts

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!