functioncharts与extjs结合,做多折线图

原创 2015年11月18日 09:06:46

1.引用相应的包FusionCharts.js

2.编辑相应的XML格式字符串

var xml = "<?xml version='1.0' encoding='UTF-8'?>" +

"<chart caption='' yAxisName='温度值' xAxisName='周期'" +

"bgColor='' bgAlpha='50' bgRatio='40,60,30' bgAngle='180'" +

"showBorder='1' borderColor='1D8BD1' borderThickness='3' borderAlpha='30' numberSuffix=''>" +

"<categories>" +

"<category label='11月份' />" +

"<category label='11月份' />" +

"<category label='11月份' />" +

"<category label='11月份' />" +

"<category label='11月份' />" +

"<category label='11月份' />" +

"<category label='11月份' />" +

"<category label='11月份' />" +

"<category label='11月份' />" +

"<category label='11月份' />" +

"</categories>" +

"<dataset seriesName='室内温度' color='1D8BD1' anchorBorderColor='1D8BD1' >" +

"<set value='24' />" +

"<set value='17' />" +

"<set value='19' />" +

"<set value='20' />" +

"<set value='23' />" +

"<set value='20' />" +

"<set value='17' />" +

"<set value='17' />" +

"<set value='24' />" +

"<set value='23' />" +

"</dataset>" +

"<dataset seriesName='室外温度' color='F1683C' anchorBorderColor='1D8BD1' anchorAlpha='0' showValues='0'>" +

"<set value='15' />" +

"<set value='7' />" +

"<set value='12' />" +

"<set value='5' />" +

"<set value='15' />" +

"<set value='5' />" +

"<set value='5' />" +

"<set value='15' />" +

"<set value='9' />" +

"<set value='11' />" +

"</dataset>" +

"<dataset seriesName='室外温度2' color='F1683C' anchorBorderColor='1D8BD1' anchorBgColor='F1683C'>" +

"<set value='' />" +

"<set value='9' />" +

"</dataset>" +

"</chart>";

 

3.制作相应的页面,FusionCharts图表渲染到div中,再由extjs显示相应的panel

var feeStatisticPanel = new Ext.Panel({

   html : "<div id='feeStatisticGraphDiv'></div>"

});

 

var window= new Ext.Window({

title : '<span class="commoncss">多重折线图<span>', // 窗口标题

layout : 'fit', // 设置窗口布局模式

width : 800, // 窗口宽度

height : 550, // 窗口高度

closable : false, // 是否可关闭

collapsible : true, // 是否可收缩

autoScroll : true,

maximizable : true, // 设置是否可以最大化

border : false, // 边框线设置

constrain : true, // 设置窗口是否可以溢出父容器

animateTarget : Ext.getBody(),

pageY : 20, // 页面定位Y坐标

pageX : document.body.clientWidth / 2 - 800 / 2, // 页面定位X坐标

items : [feeStatisticPanel],

buttons : [{

text : '关闭',

iconCls : 'deleteIcon',

handler : function() {

window.hide();

}

}]

});

window.show();

// 注:以下代码必须在页面显示之后才可执行,否则会报错

var chart = new FusionCharts("js/MSLine.swf", "chartId", "790", "500", "0", "1");

//chart.setDataURL("Data.xml");  // XML文档

chart.setDataXML(xml);// 加载XML字符串

chart.render("feeStatisticGraphDiv");

 

anchorAlpha='0' 不显示节点 

 

showValues='0' 不显示节点值

[Ext JS 4] Extjs 图表 Legend(图例)的分行与分列显示

Legend, 翻译过来的意思是图例。 在Extjs 的Chart 中, 到底右边红色框起来的部分就是Legend 了。 在 Extjs Chart 的定义中, 可以通过配置 legend 的配置...
  • oscar999
  • oscar999
  • 2014年05月27日 08:20
  • 9265

ExtJS6图表简单demo(折线图,散点图,柱状图)

ExtJS6图表简单demo(折线图,散点图,柱状图)首先需要引入这三个文件,都懂 ...
  • taizhimin
  • taizhimin
  • 2016年06月27日 09:01
  • 1589

extjs4图表--折线图

本篇文章将介绍extjs中自带的图表 在本次案例中,提供一下功能: 1.从后端请求数据并运用到图表中,形成动态数据。 2.查询出每年各个月中人数。 请看下面代码: Ext.define('Char...
  • m0_37479246
  • m0_37479246
  • 2017年12月28日 15:23
  • 162

EXTJS 动态更新的折线图

MyApp10 //Ext.require('Ext.chart.*'); Ext.onReady(func...
  • dongsoso
  • dongsoso
  • 2014年08月13日 15:18
  • 1355

【ExtJs】折线图

ExtJs在ExtJs4之后,包含4则推出了图表功能,虽然图表功能可以通过其余JQuery插件实现,例如《【jQuery】兼容IE6的图表插件Highcharts》(点击打开链接),但是这个ExtJs...
  • yongh701
  • yongh701
  • 2015年05月03日 11:17
  • 1894

extjs生成动态折线图

extjs生成动态折线图,官网demo只有一个维度的动态,然而实际上的变态需求是,x,y两个维度都要根据配置,动态来生成折线图。为了实现代码,作者连下班骑着自己价值连成的二手自行车都在想:这代码究竟怎...
  • u010290791
  • u010290791
  • 2017年01月17日 21:58
  • 775

EXTJS lineChart折线图

JSON文件
  • dongsoso
  • dongsoso
  • 2014年08月07日 11:27
  • 3827

ExtJS制作折线图

  • 2014年06月15日 23:40
  • 5.37MB
  • 下载

echarts-多折线图

1、问题背景     设计一个折线图,折线图展示苹果、香蕉的销售量2、实现源码 echarts-多折线图 body,html{ width: 99%; ...
  • you23hai45
  • you23hai45
  • 2016年06月23日 21:09
  • 10922

jqplot折线图实现 例子

jqPlot 折线图 例子
  • SunMountain
  • SunMountain
  • 2015年01月15日 20:20
  • 3104
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:functioncharts与extjs结合,做多折线图
举报原因:
原因补充:

(最多只允许输入30个字)