Sharing the effect of 2D bar chart drawn by jQuery plug-in FusionCharts

This article mainly introduces the effect of 2D bar charts drawn by the jQuery plug-in FusionCharts. It analyzes the specific steps and related operating techniques of jQuery using the FusionCharts plug-in to draw 2D bar charts with a complete example. It also comes with demo source code for readers to download for reference. Friends in need can refer to it, I hope it can help everyone.

1. Design ideas

(1) Understand some characteristics and commonalities of bar charts and master their characteristics;

(2) According to the FusionCharts design hierarchy, set up the static page and data source;

(3) Introduce the bar chart and set its properties.

2. Design steps

(1) Design the script to generate the bar chart

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

(2) Design data source

<?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) Introduce FusionCharts bar chart

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

3. Complete example code:

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

4. Running rendering:

Related recommendations:

FusionCharts 3D Double Bar Chart

FusionCharts 2D Histogram Combination chart with line chart

php chart fusioncharts usage example

The above is the detailed content of Sharing the effect of 2D bar chart drawn by jQuery plug-in FusionCharts. For more information, please follow other related articles on the PHP Chinese website!