FusionCharts 2D柱状图和折线图的组合图 -XML/RSS教程-PHP中文网

首页

后端开发

XML/RSS教程

FusionCharts 2D柱状图和折线图的组合图

黄舟

Feb 15, 2017 pm 03:19 PM

1、设计思路

（1）了解组合图的特性以及用法，选用图的类型；

（2）设计出两根柱子和两根折线，分开展示。

2、设计步骤

（1）设计页面

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>

（2）设计出数据源

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>

3、设计结果

以上就是FusionCharts 2D柱状图和折线图的组合图的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

RSS和XML：Web联合组织的基石Apr 29, 2025 am 12:22 AM

RSS和XML是网络内容分发和数据交换的核心技术。RSS用于发布频繁更新的内容，XML用于存储和传输数据。通过实际项目中的使用示例和最佳实践，可以提高开发效率和性能。

RSS提要：探索XML的作用和目的Apr 28, 2025 am 12:06 AM

XML在RSSFeed中的作用是结构化数据、标准化和提供可扩展性。1.XML使得RSSFeed的数据结构化，便于解析和处理。2.XML提供了一种标准化的方式来定义RSSFeed的格式。3.XML的可扩展性使得RSSFeed可以根据需要添加新的标签和属性。

缩放XML/RSS处理：性能优化技术Apr 27, 2025 am 12:28 AM

处理XML和RSS数据时，可以通过以下步骤优化性能：1)使用高效的解析器如lxml提升解析速度；2)采用SAX解析器减少内存使用；3)利用XPath表达式提高数据提取效率；4)实施多进程并行处理提升处理速度。

RSS文档格式：探索RSS 2.0及以后Apr 26, 2025 am 12:22 AM

RSS2.0是一种开放标准，允许内容发布者以结构化的方式分发内容。它包含了丰富的元数据，如标题、链接、描述、发布日期等，使得订阅者能够快速浏览和访问内容。RSS2.0的优势在于其简洁和扩展性。例如，它允许自定义元素，这意味着开发者可以根据需求添加额外的信息，如作者、分类等。

理解RSS：XML观点Apr 25, 2025 am 12:14 AM

RSS是一种基于XML的格式，用于发布经常更新的内容。1.RSSfeed通过XML结构化组织信息，包括标题、链接、描述等。2.创建RSSfeed需按照XML结构编写，添加元数据如语言和发布日期。3.高级用法可包含多媒体文件和分类信息。4.调试时使用XML验证工具，确保必需元素存在且编码正确。5.优化RSSfeed可通过分页、缓存和保持结构简洁来实现。通过理解和应用这些知识，可以有效管理和分发内容。