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. Win10下通过IIS调试ASP程序遇到的问题和解决方案

    最近维护了以前别人的写的一个ASP的系统,记录一下调试过程中的问题和解决方案. 环境篇 万维网发布服务(W3SVC)已经停止 问题: 万维网发布服务(W3SVC)已经停止.除非万维网发布服务(W3SV ...

  2. typedef如何显示变量类型名

    dsa typedef unsigned long int NUM; typedef unsigned short int Data; //为已经存在的类型起一个别名 //1.定义一个变量 unsig ...

  3. [PHP] Phalcon操作示范

    这篇内容将对下列操作进行示范: Insert.Select.Update.Calculation.Transaction.models advanced.dev-tools.cookies [ Ins ...

  4. DVWA安装问题（phpStudy）

    安装过程出现的问题: 1.PHP function allow_url_include disabled 注意DVWA的版本    PHP version: 5.4.45 打开/phpStudy/ph ...

  5. echarts中视觉映射器（visualMap）与时间轴（timeline）混用的实现方法

    1.简述 echarts中的 timeline 组件,提供了在多个 ECharts option 间进行切换.播放等操作的功能. 与其他组件些不同,它需要操作『多个option』. 所以除了基准的ba ...

  6. 在eclipse的配置文件里指定jdk路径

    在eclipse的配置文件里指定jdk路径,只需在eclipse的配置文件里增加-vm参数即可. 打开eclipse目录下的eclipse.ini配置文件,增加-vm配置,需要注意的是该参数要加在-v ...

  7. css模板

    最近好多人问我博客的css模板.... 现在是高三,没多少时间,趁放假赶紧更一下 主体就是把博客园的一个模板改动了一点 上面的图片特效,也是从别人那里得到的代码,大致就是下面那些,下面的三个图片换成自 ...

  8. MathJax使用指南

    MathJax使用指南 SublimePrettyJson Github CSDN-Markdown语法集锦 LaTex 简明教程 在Markdown中输入数学公式(MathJax) MathJax ...

  9. Maven编译问题

    Maven构建的Project默认使用JDK1.5进行编译,要想使用JDK1.8进行编译,最好在项目的POM文件中加上以下的字段. <build> <plugins> < ...

  10. Chrome浏览器的使用

    1 切换Tab 方法一: Ctrl+Tab键,标签页往前循环,或者说往右循环.Ctrl+Shift+Tab键,标签页往后循环,或者说往左循环 方法二: Ctrl + 数字键 Ctrl + 1 : 切换 ...