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

FusionCharts 3D-Dual-Balkendiagramm

黄舟

Freigeben： 2017-02-15 15:22:43

Original

2068 Leute haben es durchsucht

1. Der Quellcode der 3D-Doppelsäulendiagrammseite lautet wie folgt:

doubleColumn3D.html:

<!DOCTYPE html>
<!--
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.
-->
<html>
    <head>
        <title>FusionCharts 3D双柱状图</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script type="text/javascript" src="../script/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="../script/Charts/FusionCharts.js"></script>
        <style type="text/css">
            body{
                width:99%;
                height:100%;
                font-size:12px;
            }
            #doubleColumn3DChart{
                width:100%;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                var column3D = new FusionCharts( "../script/Charts/MSColumn3D.swf", "myChartId", "100%", "520", "0" );
                column3D.setXMLUrl("data/doubleColumn3D.xml");
                column3D.render("doubleColumn3DChart");   
            });
        </script>
    </head>
    <body>
        <p id="doubleColumn3DChart"></p>
    </body>
</html>

Nach dem Login kopieren

2. 3D-Doppelsäulendiagramm-Datenquelle

doubleColumn3D.xml:

<?xml version="1.0" encoding="UTF-8"?>
<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;>

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

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

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

</chart>

Nach dem Login kopieren

3. Das Laufergebnis ist wie unten dargestellt

(1 ) Beim Initialisieren

(2) Beim Klicken auf Legende 2012

(3) Beim Klicken auf die Legende 2013

(4) Beim Klicken auf Legende 2012 und Legende 2013

Das Obige ist Der Inhalt des 3D-Doppelbalkendiagramms von FusionCharts, weitere verwandte Inhalte. Bitte beachten Sie die chinesische PHP-Website (www.php.cn)!