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. mysql安装(CentOS 7.1 (64-bit system) MySQL 5.6.24)

    环境:CentOS 7.1 (64-bit system) MySQL 5.6.24yum install libaio //安装依赖的包wget http://dev.mysql.com/get/m ...

  2. ElasticSearch 6 Windows 安装

    前言 目前使用ElasticSearch 6.2最新版本,这里记录其在windows 2012R2系统上的安装步骤. 安装 1. 安装java,最新版本的ElasticSearch 需要java8 版 ...

  3. 以Apache模块的方式编译安装php-5.4.27

    为什么要安装低版本的php? 由于apc,xcache的更新版本跟不上php版本的速度,所以,我们需要安装比较稳定的php低版本程序,再安装其它与之相匹配的扩展. 开工: 新建用户及用户组 group ...

  4. BZOJ 1396&&2865 识别子串[后缀自动机 线段树]

    Description 在这个问题中,给定一个字符串S,与一个整数K,定义S的子串T=S(i, j)是关于第K位的识别子串,满足以下两个条件: 1.i≤K≤j. 2.子串T只在S中出现过一次. 例如, ...

  5. 使用IntelliJ IDEA（PHPStorm）和xdebug在firefox、chrome中远程调试PHP

    很多PHP程序员都习惯于使用echo.var_dump和exit来中断和调试web应用程序,本文主要介绍结合xdebug.IntelliJ IDEA.Firefox/chrome/IE来远程调试PHP ...

  6. 【JavaWeb】JDBC连接MySQL数据库

    正文之前 在之前写的JavaWeb项目中使用了JDBC,在此来回顾一下,并做个demo看看,先来看看JDBC的概念 Java数据库连接,(Java Database Connectivity,简称JD ...

  7. python中的randint,引入模块

    引入模块的方法: from 模块名 import 方法名 范例: from random import randint#使用randint需要加上这句 while True: answer=randi ...

  8. Redis 学习(一) —— 安装、通用key操作命令

    一.Redis介绍 1.介绍 通常,在系统中,我们会把数据交由数据库来存储,但传统的数据库增删查改的性能较差,且比较复杂.根据 80/20 法则,百分之八十的业务访问集中在百分之二十的数据上.是否可以 ...

  9. dedecms判断当前页面是否为首页 织梦设置首页高亮

    做织梦网站导航栏时,我们一般需要设置当前栏目高亮显示,这个使用currentstyle就能直接实现,但是如果在首页时怎么让首页模块高亮呢? 织梦当前栏目高亮: <style>.hover{ ...

  10. springboot入门_helloworld

    开始学习springboot,在此做记录,有不正确之处,还望读者指正. springboot框架的设计目的是用来简化新Spring应用的初始环境搭建以及开发过程.主要体现有:1 xml配置文件,使用s ...