FusionCharts Graphique à barres 2D et graphique combiné-Tutoriel XML/RSS-php.cn

FusionCharts Graphique à barres 2D et graphique combiné

黄舟

Libérer： 2017-02-15 15:19:13

original

1960 Les gens l'ont consulté

1. Idées de conception

(1) Comprendre les caractéristiques et l'utilisation des diagrammes combinés et choisir le type de diagramme

(2) Concevez deux colonnes et deux lignes de pliage et affichez-les séparément.

2. Étapes de conception

(1) Page de conception

Column2DLine.html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>FuionCharts 2D柱状图和折线图组合图</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../scripts/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="../scripts/Charts/FusionCharts.js"></script>
    <script type="text/javascript">
        $(function(){
              var column2DLine = new FusionCharts( "../scripts/Charts/MSCombi2D.swf", "doubleAreaId", "100%", "540", "0" );
      		  column2DLine.setXMLUrl("data/columnLine.xml");
              column2DLine.render("columnLine");
        });
    </script>

  </head>
  
  <body>
    <p id="columnLine"></p>
  </body>
</html>

Copier après la connexion

(2) Concevoir la source de données

columnLine.xml :

<?xml version="1.0" encoding="UTF-8"?>
<chart caption=&#39;2010-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;20&#39; outCnvBaseFontColor=&#39;#0000FF&#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;2010&#39;>
      <set value=&#39;59845&#39; />
      <set value=&#39;36562&#39;/>
      <set value=&#39;15421&#39; />
      <set value=&#39;56213&#39; />
      <set value=&#39;45121&#39; />
      <set value=&#39;56232&#39; />
      <set value=&#39;56121&#39; />
      <set value=&#39;23565&#39; />
      <set value=&#39;85656&#39; />
      <set value=&#39;45421&#39; />
      <set value=&#39;23561&#39; />
      <set value=&#39;24801&#39; />
   </dataset>
   
   <dataset seriesName=&#39;2011&#39; renderAs=&#39;Line&#39;>
      <set value=&#39;56122&#39; />
      <set value=&#39;65121&#39;/>
      <set value=&#39;45154&#39; />
      <set value=&#39;20120&#39; />
      <set value=&#39;95656&#39; />
      <set value=&#39;46522&#39; />
      <set value=&#39;65323&#39; />
      <set value=&#39;62311&#39; />
      <set value=&#39;95656&#39; />
      <set value=&#39;65322&#39; />
      <set value=&#39;74545&#39; />
      <set value=&#39;56231&#39; />
   </dataset>
   
   <dataset seriesName=&#39;2012&#39;>
      <set value=&#39;95656&#39; />
      <set value=&#39;54132&#39;/>
      <set value=&#39;45511&#39; />
      <set value=&#39;23200&#39; />
      <set value=&#39;65622&#39; />
      <set value=&#39;32600&#39; />
      <set value=&#39;54512&#39; />
      <set value=&#39;56232&#39; />
      <set value=&#39;26562&#39; />
      <set value=&#39;45421&#39; />
      <set value=&#39;52211&#39; />
      <set value=&#39;65623&#39; />
   </dataset>

   <dataset seriesName=&#39;2013&#39; renderAs=&#39;Line&#39;>
      <set value=&#39;56444&#39;/>
      <set value=&#39;65232&#39;/>
      <set value=&#39;12123&#39;/>
      <set value=&#39;21222&#39;/>
      <set value=&#39;78454&#39; />
      <set value=&#39;56211&#39; />
      <set value=&#39;42422&#39; />
      <set value=&#39;95655&#39; />
      <set value=&#39;45455&#39; />
      <set value=&#39;95656&#39; />
      <set value=&#39;22900&#39; />
      <set value=&#39;41512&#39; />
   </dataset>

</chart>

Copier après la connexion

3. >

Ce qui précède est le graphique combiné du graphique à barres et de la ligne FusionCharts 2D. Contenu du graphique, veuillez faire attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !