简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > pembangunan bahagian belakang > Tutorial XML/RSS > teks badan

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

黄舟
Lepaskan： 2017-02-15 15:19:13
asal
1867 orang telah melayarinya

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>
Salin selepas log masuk

（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>
Salin selepas log masuk


3、设计结果



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

Label berkaitan：
FusionCharts ，2D柱状图，折线图
sumber：php.cn
Artikel sebelumnya：FusionCharts 2D柱状图和折线图的组合图调试错误 Artikel seterusnya：FusionCharts 3D双柱状图
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
python - 如何使用websocket在网页上动态示实时数据的折线图？ 需要在树莓派上搭建一个webserver（使用flask），将树莓派采集到的传感器实时数据（用python采集）以折线图(或柱状图)的方式动态显示在网页上。
daripada 2017-04-18 10:32:41
0
2
736
java - 柱状图是过往每周几的平均数，折线是最近一周的值。这样的图应该起个什么名字，才更直观（图如下）？ 他的title 应该叫什么名字 才能直观的体现出来，我这个功能是干什么的。
daripada 2017-04-18 10:31:58
0
2
388
java - 如何在Eclipse中实现android实时图表？ 比如柱状图，折线图，波形图看到网上很多例子都是利用MPAndroidChart，HelloCharts等，但是我导入eclipse后，代码无提示错误，但一运行就结束了。
daripada 2017-04-18 10:29:21
0
2
339
java - 求一个可以将数据导入成饼状图柱状图到PPT的库。 chart 前端展示这个有很多的库可以做，现在我想将数据导入到PPT内。并且直接生成饼状图柱状图折线图。有没有现成的库。 或是调用POI导出生成 这些的图的ppt 的例子。谢谢
daripada 2017-04-17 17:10:10
0
0
226
图表 - iOS 下有没有帮助开发生成统计图的库？ 能够根据数据生成诸如柱状图、曲线图、饼图之类的图表。 收费或者免费的都可以，最好是开源的。有没有优秀的推荐？
daripada 2017-04-17 10:57:50
0
4
487
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！