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' anchorAlpha='0' showValues='0'>" +
"<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'>" +
"<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' 不显示节点值