FusionCharts 2D双折线图

1、设计思路

(1)根据双折线图的特性和共性,设计出双折线图;

(2)设置数据源XML格式

2、设计步骤

(1)写出双折线引入的图类型和数据源路径

var doubleLine = new FusionCharts( "../scripts/Charts/MSLine.swf", "doubleLineId", "100%", "540", "0" );
doubleLine.setXMLUrl("data/doubleLine.xml");
doubleLine.render("doubleLineChart");

(2)设置双折线图的数据源

doubleLine.xml:

<?xml version="1.0" encoding="UTF-8"?>
<chart caption=‘2012和2013年某桥一周通过的人数‘ xAxisName=‘星期‘ yAxisName=‘人数‘ showValues=‘0‘
       baseFont=‘微软雅黑‘ baseFontSize=‘14‘ baseFontColor=‘#FF0000‘ outCnvBaseFont=‘宋体‘
       outCnvBaseFontSize=‘20‘ outCnvBaseFontColor=‘#00FF00‘ legendShadow=‘1‘
       legendAllowDrag=‘1‘ reverseLegend=‘1‘ interactiveLegend=‘1‘ legendNumColumns=‘2‘
       minimiseWrappingInLegend=‘1‘ showLegend=‘1‘ legendPosition=‘BOTTOM‘ showZeroPlane=‘1‘>

   <categories>
      <category label=‘星期一‘ />
      <category label=‘星期二‘ />
      <category label=‘星期三‘ />
      <category label=‘星期四‘ />
      <category label=‘星期五‘ />
      <category label=‘星期六‘ />
      <category label=‘星期日‘ />
   </categories>

   <dataset seriesName=‘2012‘>
      <set value=‘656445‘ />
      <set value=‘412555‘/>
      <set value=‘956566‘ />
      <set value=‘125645‘ />
      <set value=‘561124‘ />
      <set value=‘265655‘ />
      <set value=‘451212‘ />
   </dataset>

   <dataset seriesName=‘2013‘>
      <set value=‘154512‘/>
      <set value=‘598655‘/>
      <set value=‘654544‘/>
      <set value=‘956565‘/>
      <set value=‘245454‘ />
      <set value=‘965565‘ />
      <set value=‘454545‘ />
   </dataset>

</chart>

(3)引入双折线图

<div id="doubleLineChart"></div>

3、设计结果

(1)初始化时

(2)点击“2012”

(3)点击“2013”

(4)选择“2012”和“2013”

4、源码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>FusionCharts 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 doubleLine = new FusionCharts( "../scripts/Charts/MSLine.swf", "doubleLineId", "100%", "540", "0" );
      		  doubleLine.setXMLUrl("data/doubleLine.xml");
              doubleLine.render("doubleLineChart");
        });
    </script>

  </head>

  <body>
     <div id="doubleLineChart"></div>
  </body>
</html>

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

原文地址:https://www.cnblogs.com/odejsjhshw/p/10387204.html

时间: 2024-10-08 08:30:59

FusionCharts 2D双折线图的相关文章

FusionCharts,双折线图和双柱状图

一个电商项目中,用到了"双柱状图",对比 当前库存和累计库存. 网上找了好几个贴子,才找到具体用法. 代码整理下,以备不时之需. 效果图-双折线图 效果图-双柱状图 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <script type="text/javascript&q

[Unity3D]Unity3D游戏开发之基于2D贴图实现血条组件的开发

各位朋友,大家好,欢迎大家关注我的博客,我是秦元培,我的博客地址是blog.csdn.net/qinyuanpei. 在上一篇文章中,我们以经典的打砖块游戏为例,讲解了一个Unity3D游戏的完整实现过程.今天呢,我们来做一个在游戏中十分重要的组成元素:血条.血条是什么呢?血条是生命值的一种体现,就像<仙剑奇侠传三>电视剧中,当景天说他想让那些被邪剑仙害死的人活过来的时候,天帝说需要等量的生命值来换,所以电视剧中的结局就变成了景天留在世上的时间并不多了,雪见依偎着他坐在新安当门口的时候,天上忽

canvas 2d 贴图技术实践

最近在公司内部的技术协会论坛里闲逛的时候,无意中发现了一篇手淘前端大牛岑安两年前写的博文,讲述了canvas的2d贴图技术.看到后觉得相当神奇.于是就自己实现了一下.不过岑安前辈的那篇博文也只是大概讲述了一下实现思路,整个逻辑还是自己慢慢摸索出来的,过程还是挺心酸的,所以在此记录一下并且分享一下,让跟我一样喜欢canvas的人有所收获吧. 废话不说,先把demo贴出来,好歹让大伙看看我们要实现怎样的效果: 第一个demo: 图像拉扯变形demo_1 第二个demo: 图像3d变形demo_2 看

FusionCharts Free 甘特图

用FusionCharts做甘特图 1.同步方式(用xml格式字符) 前台aspx代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <meta http-eq

照猫画虎学gnuplot之双折线图

上节讲了如何用gnuplot进行数据绘图,即如何画单折线图.实验中经常碰到的情况是,我们要同时处理多组数据.本节将讲解如何把多组数据绘制在同一个图上,即如何在同一个二维平面上画多个折线图. 依然拿城市降水量举例,下面就是我们的数据文件,文件名是"jiangshui.dat": 然后在*.plt文件中录入下列命令: 用gnuplot软件将该*.plt文件打开,如下图所示: 这里使用了一个新的命令:using.在数据文件包含超过一组数据时,我们可以用using指定使用哪列数据.例如usin

WPF特效-绘制实时2D激光雷达图

原文:WPF特效-绘制实时2D激光雷达图 接前两篇: https://blog.csdn.net/u013224722/article/details/80738619 https://blog.csdn.net/u013224722/article/details/80738995 除了c# GDI .Opencv(c++). c# Emgu绘图外,其实c#? WPF绘图功能也很强大.上文中之所以最终使用了Emgu绘图 ,只是因为在踩坑过程中尝试使用了Emgu的图像处理函数. 即首先将List

HighCharts之2D圆环图

1.实例源码 Donut.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D圆环图</title> <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>

FusionCharts(v3.6.0)使用(1)

前段时间做一个统计系统,需要画各种图表,于是找到了FusionCharts这个插件,功能甚是强大.在这个闲暇的春日午后,将这个插件的快速使用的方法写下来,方便懒得去官网看英文的朋友参考 安装 FusionCharts 是运行在桌面或者移动端Web浏览器中的JavaScript脚本库.安装它仅需复制粘贴下载的压缩包里的JS文件到你的项目目录下.然后,你就可以在你的Web应用程序中很轻松的引用FusionCharts脚本库,绘制各式各样的图表. 1. 在你的Web应用程序的根目录下创建一个名为fus

FusionCharts使用问题及解决方法(四)-FusionCharts常见问题大全

在前3篇文章中,我们总结了FusionCharts图表的一些常见问题(FAQ)及解决方法,本文继续讨论FusionCharts使用者常见的一些复杂的报错及解决方法. 问题描述:使用FusionCharts时,我想在一个给定的时间间隔内自动在服务器端生成图表,将最新生成的图表以电子邮件方式发出去? 解决方法:请注意,目前为止FusionCharts 不支持直接通过邮件发送图表.但是FusionCharts图表组件允许你将图片导出为图像并保存在服务器上.因此,你可以编写你自己的脚本,然后自动地将保存