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>
    <div id="columnLine"></div>
  </body>
</html>

（2）设计出数据源

columnLine.xml：

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='2010-2013年某人年收入详细' xAxisName='月份' yAxisName='收入' showValues='0'
       baseFont='微软雅黑' baseFontSize='14' baseFontColor='#00FF00' outCnvBaseFont='宋体'
       outCnvBaseFontSize='20' outCnvBaseFontColor='#0000FF'>

   <categories>
      <category label='一月' />
      <category label='二月' />
      <category label='三月' />
      <category label='四月' />
      <category label='五月' />
      <category label='六月' />
      <category label='七月' />
      <category label='八月' />
      <category label='九月' />
      <category label='十月' />
      <category label='十一月' />
      <category label='十二月' />
   </categories>

   <dataset seriesName='2010'>
      <set value='59845' />
      <set value='36562'/>
      <set value='15421' />
      <set value='56213' />
      <set value='45121' />
      <set value='56232' />
      <set value='56121' />
      <set value='23565' />
      <set value='85656' />
      <set value='45421' />
      <set value='23561' />
      <set value='24801' />
   </dataset>

   <dataset seriesName='2011' renderAs='Line'>
      <set value='56122' />
      <set value='65121'/>
      <set value='45154' />
      <set value='20120' />
      <set value='95656' />
      <set value='46522' />
      <set value='65323' />
      <set value='62311' />
      <set value='95656' />
      <set value='65322' />
      <set value='74545' />
      <set value='56231' />
   </dataset>

   <dataset seriesName='2012'>
      <set value='95656' />
      <set value='54132'/>
      <set value='45511' />
      <set value='23200' />
      <set value='65622' />
      <set value='32600' />
      <set value='54512' />
      <set value='56232' />
      <set value='26562' />
      <set value='45421' />
      <set value='52211' />
      <set value='65623' />
   </dataset>

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

</chart>

3、设计结果

FusionCharts 2D柱状图和折线图的组合图的更多相关文章

  1. FusionCharts 2D柱状图和折线图的组合图调试错误

    在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...

  2. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  3. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

  4. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

  5. Flex中的FusionCharts 2D折线图

    Flex中的FusionCharts 2D折线图 1.设计源码 LineChart.mxml: <?xml version="1.0" encoding="utf- ...

  6. FusionCharts数据展示成饼状图、柱状图和折线图

    FusionCharts数据展示成饼状图.柱状图和折线图 本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如echarts,自定义图表标签.使用jfreecha ...

  7. Qt数据可视化（散点图、折线图、柱状图、盒须图、饼状图、雷达图）开发实例

    ​  目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...

  8. JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)

    import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...

  9. 【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)

    第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...

随机推荐

  1. 从jvm源码看synchronzied

    synchronized的使用 synchronized关键字是Java中解决并发问题的一种常用方法,也是最简单的一种方法,其作用有三个:(1)互斥性:确保线程互斥的访问同步代码(2)可见性:保证共享 ...

  2. CSS :befor :after 伪元素的妙用

    本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...

  3. 导入一个新项目需要注意的几大问题（jdk1.6+eclipse4.4+tomcat6）

    今天导项目犯了一个很低级的错误,浪费了半个小时,所以在此罗列出在导一个新的项目到eclipse中时需要注意的几个问题,希望对大家有所帮助. 将项目从svn或者github等项目版本控制软件上拷贝下来, ...

  4. MySQL笔记-语句的执行顺序

    在一次查询线上问题时发现有以下两条同样的SQL,执行后数据的顺序不一样: SELECT * FROM nns_assists_item AS asset WHERE asset.nns_assist_ ...

  5. POJ [P2289] Jamie's Contact Groups

    二分+二分图多重匹配 辣鸡ACM式读入 对于这种奇葩的读入方法,还是老老实实的用scanf吧 #include <iostream> #include <cstdio> #in ...

  6. URL中特殊符号的处理

    问题描述 我们在对接第三方系统的时候通常需要get或post来传输数据,但此时如果参数中存在&% #*!包括空格等特殊符号的时候就无法正常请求具体表现在参数获取不正确或者获取不到参数,甚至有时 ...

  7. selenium2 python自动化测试实战(回归测试)

    selenium2 python自动化测试实战 最近接手商城的项目,针对后台测试,功能比较简单,但是流程比较繁多,涉及到前后台的交叉测试.在对整个项目进行第一轮测试完成之后,考虑以后回归测试任务比较重 ...

  8. 在Swift项目中使用OC，在OC项目中使用Swift

    几天前,我开始新的App的开发了.终于有机会把swift用在实战中了,也学到了之前纯学语法时没有机会获得的知识. 这篇博文中,我就如何使用swift.OC混编做一个介绍. OC中使用Swift 首先, ...

  9. 在tableViewCell的点击事件中处理界面跳转问题

    UIViewController *controller; UIView *view = self.view; while (1) { controller = (UIViewController * ...

  10. eclipse 使 用Ctrl+鼠标左键进入mapper.xml文件的方法

    在 >eclipse MarketPlace中下载>Mybatipse 插件安装重启即可完成