FusionCharts 3D Dual Bar Chart-XML/RSS Tutorial-php.cn

Home

Backend Development

XML/RSS Tutorial

FusionCharts 3D Dual Bar Chart

黄舟

Feb 15, 2017 pm 03:22 PM

1. The source code of the 3D double column chart page is as follows

doubleColumn3D.html:

&lt;!DOCTYPE html&gt;
&lt;!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
--&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;FusionCharts 3D双柱状图&lt;/title&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;../script/jquery-1.10.2.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;../script/Charts/FusionCharts.js&quot;&gt;&lt;/script&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            body{
                width:99%;
                height:100%;
                font-size:12px;
            }
            #doubleColumn3DChart{
                width:100%;
            }
        &lt;/style&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function(){
                var column3D = new FusionCharts( &quot;../script/Charts/MSColumn3D.swf&quot;, &quot;myChartId&quot;, &quot;100%&quot;, &quot;520&quot;, &quot;0&quot; );
                column3D.setXMLUrl(&quot;data/doubleColumn3D.xml&quot;);
                column3D.render(&quot;doubleColumn3DChart&quot;);   
            });
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p id=&quot;doubleColumn3DChart&quot;&gt;&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;

2. 3D double column chart data source

##doubleColumn3D.xml：

&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;chart caption=&#39;2012年和2013年统计收入&#39; xAxisName=&#39;月份&#39; yAxisName=&#39;收入&#39; showValues=&#39;0&#39; baseFont=&#39;微软雅黑&#39; baseFontSize=&#39;14&#39;
       baseFontColor=&#39;#00FF00&#39; outCnvBaseFont=&#39;宋体&#39; outCnvBaseFontSize=&#39;16&#39; outCnvBaseFontColor=&#39;#798777&#39; showAboutMenuItem=&#39;1&#39;
       showLabels=&#39;1&#39; labelDisplay=&#39;ROTATE &#39; useEllipsesWhenOverflow=&#39;1&#39; rotateLabels=&#39;1&#39; slantLabels=&#39;1&#39; staggerLines=&#39;2&#39;
       labelStep=&#39;3&#39; placeValuesInside=&#39;1&#39; showYAxisValues=&#39;1&#39; showLimits=&#39;1&#39; showpLineValues=&#39;1&#39; showShadow=&#39;1&#39; adjustp=&#39;1&#39;
       setAdaptiveYMin=&#39;1&#39; centerYaxisName=&#39;1&#39; useRoundEdges=&#39;1&#39; numpLines=&#39;8&#39; pLineColor=&#39;#987989&#39; pLineIsDashed=&#39;1&#39;&gt;

   &lt;categories&gt;
      &lt;category label=&#39;一月&#39; /&gt;
      &lt;category label=&#39;二月&#39; /&gt;
      &lt;category label=&#39;三月&#39; /&gt;
      &lt;category label=&#39;四月&#39; /&gt;
      &lt;category label=&#39;五月&#39; /&gt;
      &lt;category label=&#39;六月&#39; /&gt;
      &lt;category label=&#39;七月&#39; /&gt;
      &lt;category label=&#39;八月&#39; /&gt;
      &lt;category label=&#39;九月&#39; /&gt;
      &lt;category label=&#39;十月&#39; /&gt;
      &lt;category label=&#39;十一月&#39; /&gt;
      &lt;category label=&#39;十二月&#39; /&gt;
   &lt;/categories&gt;

   &lt;dataset seriesName=&#39;2012&#39;&gt;
      &lt;set value=&#39;45155&#39; /&gt;
      &lt;set value=&#39;12452&#39;/&gt;
      &lt;set value=&#39;63455&#39; /&gt;
      &lt;set value=&#39;45233&#39; /&gt;
      &lt;set value=&#39;95656&#39; /&gt;
      &lt;set value=&#39;87545&#39; /&gt;
      &lt;set value=&#39;12425&#39; /&gt;
      &lt;set value=&#39;94633&#39; /&gt;
      &lt;set value=&#39;85452&#39; /&gt;
      &lt;set value=&#39;75455&#39; /&gt;
      &lt;set value=&#39;32312&#39; /&gt;
      &lt;set value=&#39;65625&#39; /&gt;
   &lt;/dataset&gt;

   &lt;dataset seriesName=&#39;2013&#39;&gt;
      &lt;set value=&#39;65655&#39;/&gt;
      &lt;set value=&#39;74555&#39;/&gt;
      &lt;set value=&#39;61245&#39;/&gt;
      &lt;set value=&#39;12451&#39;/&gt;
      &lt;set value=&#39;95656&#39; /&gt;
      &lt;set value=&#39;24655&#39; /&gt;
      &lt;set value=&#39;45122&#39; /&gt;
      &lt;set value=&#39;32656&#39; /&gt;
      &lt;set value=&#39;65656&#39; /&gt;
      &lt;set value=&#39;95666&#39; /&gt;
      &lt;set value=&#39;65323&#39; /&gt;
      &lt;set value=&#39;54656&#39; /&gt;
   &lt;/dataset&gt;

&lt;/chart&gt;

3. The running result is as shown below

(1) During initialization

(2) When clicking on the legend 2012

(3) When clicking on the legend 2013

## (4) When clicking legend 2012 and legend 2013

The above is the content of FusionCharts 3D double bar chart. For more related content, please pay attention to PHP Chinese Net (m.sbmmt.com)!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress images for free

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undresser.AI Undress

AI-powered app for creating realistic nude photos

ArtGPT

AI image generator for creative art from text prompts.

Stock Market GPT

AI powered investment research for smarter decisions

Hot Article

How to correctly migrate jQuery's drag and drop events to native JavaScript

1 months ago By DDD

The Notepad upgrade, cheaper YouTube TV, and Nova Launcher's new owner: News roundup

4 weeks ago By DDD

How to get Iron Ore in Pokémon Pokopia

1 months ago By Jack chen

How to apply the facade pattern (Facade) in Golang Go language simplifies the API of complex systems

3 weeks ago By DDD

Solve the error of multidict build failure when installing Python package

4 weeks ago By DDD

Popular tool

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Douyin level price list 1-75

20519

wifi shows no ip assigned

13632

Virtual mobile phone number to receive verification code

11966

Where is the login entrance for gmail email?

9000

How to turn off windows security center

8505

Related knowledge

How to format and beautify XML code in Notepad ? (Pretty Print) Mar 07, 2026 am 12:20 AM

Notepad needs to manually install and enable the XMLTools plug-in to format XML; if the tags are messed up or the content is lost after formatting, it means that the XML itself is illegal, and there are problems such as unclosed tags or illegal characters.

How to convert XML to YAML for DevOps? (Configuration Management) Mar 12, 2026 am 12:11 AM

xmltodict PyYAMListhesafestcomboforDevOpsconfigfilesbecauseitpreservescomments,CDATA,namespaces,andattributesaccurately,unlikerawXML-to-YAMLtoolsorCLIutilitieslikeyqandxmllintwhichsilentlydropcriticalmetadata.

How to minify XML files for faster web loading? (Performance Optimization) Mar 08, 2026 am 12:16 AM

RunningminifyonXMLwithoutunderstandingitsrulesbreaksparsingoralterssemanticsbecausewhitespacecanbemeaningful;safeminificationrequiresdata-orientedXML,controlledgeneration/consumption,andstrictparserawareness.

How to convert an XML file to a Word document? (Reporting) Mar 09, 2026 am 01:05 AM

python-docx does not support direct reading of XML files. You need to use xml.etree.ElementTree or lxml to parse the XML extraction fields first, and then write them into the Document object segment by segment. Explicit declaration of prefixes is required to process namespaces, and manual manipulation of the underlying XML is required for table merging and styling. Chinese paths should be avoided when saving.

How to parse XML data from a URL API? (Rest Services) Mar 13, 2026 am 12:06 AM

To parse remote XML API in Python, you need to use requests to get the response and then check the status code and Content-Type. Prioritize using r.text with xml.etree.ElementTree to parse; when encountering a namespace, you need to pass the namespace dictionary; use iterparse to stream large files and clear them manually; front-end JS requires CORS support or proxy.

How to use Attributes vs Elements in XML? (Design Best Practices) Mar 16, 2026 am 12:26 AM

You should use attributes to store short metadata (such as id, type), and use elements to store scalable content data; because attributes do not support namespaces, duplication, nesting, and internationalization, their parsing is error-prone and maintenance is difficult.

How to open and view XML files in Windows 11? (Beginner Guide) Mar 12, 2026 am 01:02 AM

The XML file cannot be opened by double-clicking because it is associated with Notepad by default, causing confusion in the display. You should use Notepad, VSCode or Edge instead; Edge can format and report errors, while VSCode requires the installation of extensions such as RedHatXML for normal highlighting, indentation and verification.

How to read XML data in C# using LINQ? (.NET Development) Mar 15, 2026 am 12:43 AM

XDocument.Load() is the preferred method for reading local XML files and automatically handles encoding, BOM and format exceptions; absolute or correct relative paths are required; namespaces must be explicitly declared and participate in queries; Elements() and Descendants() behave differently and should be selected as needed; string parsing must capture XmlException and verify the source.