Teilen Sie den Effekt eines 2D-Balkendiagramms, das mit dem jQuery-Plug-in FusionCharts erstellt wurde

Dieser Artikel stellt hauptsächlich die Wirkung von 2D-Balkendiagrammen vor, die mit dem jQuery-Plug-in FusionCharts gezeichnet werden. Er analysiert anhand eines vollständigen Beispiels die spezifischen Schritte und zugehörigen Betriebstechniken von jQuery Im Lieferumfang ist außerdem ein Demo-Quellcode enthalten, den Leser als Referenz herunterladen können. Ich hoffe, dass er allen helfen kann.

1. Designideen

(1) Verstehen Sie einige Merkmale und Gemeinsamkeiten von Balkendiagrammen und beherrschen Sie ihre Eigenschaften; (2) Richten Sie statische Seiten und Datenquellen gemäß der FusionCharts-Designhierarchie ein.

(3) Führen Sie Balkendiagramme ein und legen Sie deren Eigenschaften fest.

2. Entwurfsschritte (1) Entwerfen Sie das Skript zum Generieren des Balkendiagramms

(2) Datenquelle entwerfen

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

(3) FusionCharts-Balkendiagramm vorstellen

<?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>

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

3. Vollständiger Beispielcode:

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

4. Vorgangsrendering:

Verwandte Empfehlungen:

FusionCharts 3D-Doppelbalkendiagramm

FusionCharts 2D-Balkendiagramm und Liniendiagramm-Kombinationsdiagramm

PHP-Diagramm-FusionCharts-Nutzungsbeispiel

Das obige ist der detaillierte Inhalt vonTeilen Sie den Effekt eines 2D-Balkendiagramms, das mit dem jQuery-Plug-in FusionCharts erstellt wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!