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. svn一整套使用，从下载到整个服务器搭建完成的详细说明

    SVN服务器的本地搭建和使用 Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上 ...

  2. Erlang调度器细节探析

    Erlang调度器细节探析 Erlang的很多基础特性使得它成为一个软实时的平台.其中包括垃圾回收机制,详细内容可以参见我的上一篇文章Erlang Garbage Collection Details ...

  3. Python学习笔记（三）: 收集参数

    如下代码: >>>def print_params(title,*params) print title print params >>>print_params( ...

  4. CSS的背景属性和边框属性

    CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...

  5. CS231n-lecture2-Image Classification pipeline 课堂笔记

    ---恢复内容开始--- 相关资源  Event Type  Date  Description  Course Materials Lecture 2 Thursday April 6 Image ...

  6. 小白学Docker之Swarm

    承接上篇文章:小白学Docker之Compose,自学网站来源于https://docs.docker.com/get-started 系列文章: 小白学Docker之基础篇 小白学Docker之Co ...

  7. http目录显示时间与服务器相差8小时

    一直用nginx做http服务,代码里访问过文件地址,并未认真关注过访问http目录下的时间戳.今天浏览文件的时候发现一个问题.web上显示的文件时间戳与服务器时间相比差8个小时.具体表现看下图: w ...

  8. LeetCode - 690. Employee Importance

    You are given a data structure of employee information, which includes the employee's unique id, his ...

  9. OpenCV角点检测源代码分析（Harris和ShiTomasi角点）

    OpenCV中常用的角点检测为Harris角点和ShiTomasi角点. 以OpenCV源代码文件 .\opencv\sources\samples\cpp\tutorial_code\Trackin ...

  10. 深入cocos2d-x中的touch事件

    深入cocos2d-x中的touch事件 在文章cocos2d-x中处理touch事件中简单讨论过怎样处理touch事件, 那么今天来深入了解下cocos2d-x中是怎样分发touch事件的. 我们最 ...