以前的fusionchatrs 采用的是flash的方式去实现,但是现在许多浏览器即将不再支持flash.fusionchatrs 官网的例子已经是采用json格式来实现。本文是介绍xml实现的方式:
首先,是引入js
<script language="JavaScript" src='${root}/common/js/fusioncharts-n-xt/js/fusioncharts.js'></script>
之后的工具类
/**
* 柱状图和区域图的结合
* Xdata:a;b;c
* Ydata:a1;b1;c1|a2;b2;c2
* Yname: name1|name2
* Ycolor:color1|color2
* plotSpacePercent(数值范围:0~80) 可以,80最小,0最大,超出范围数值无效
* showPlotBorder='0/1'(是否显示柱子的边框)
* usePlotGradientColor 是否柱体渐变色
* valuePosition 值的位置(ABOVE/BELOW/AUTO,上下自动)
* showBorder 画布是否显示边框
* showToolTip 悬浮框是否显示提示
* valuePosition='ABOVE' value的显示位置ABOVE/BELOW/AUTO
*/
function initCombineColumAndArea(root, containerId, width, height, Xdata, Ydata, Yname, Ycolor, chartAttrs, dataSetAttrs, trendLines, styles,dataLink,plotspace)
{
var xml = "<chart baseFontSize='12' baseFont='宋体' caption='' xAxisName='' showBorder='0' showToolTip='0' plotSpacePercent='"+plotspace+"' showPlotBorder='0' usePlotGradientColor='0' formatNumberScale='0' yAxisName='' canvasBgAlpha='0' showValues='1' numberPrefix='' "+(chartAttrs==null?"":chartAttrs)+">";
xml += "<categories>";
var Xdatas = delLastCharIfExist(Xdata,";").split(";");
for(var i=0; i<Xdatas.length; i++)
{
xml += "<category label='"+Xdatas[i]+"'/>";
}
xml += "</categories>";
var Ydatas = Ydata.split("|");
var Ynames = Yname.split("|");
var Ycolors = Ycolor.split("|");
var dataSetAttrss=dataSetAttrs.split("|");
//var setLinks = dataLink==null?null:delLastCharIfExist(dataLink,";").split("|");
var setLinks =dataLink==null?null:dataLink.split("|");
for(var i=0; i<Ydatas.length; i++)
{
var Yset = Ydatas[i].split(";");
xml += "<dataset seriesName='"+Ynames[i]+"' color='"+Ycolors[i]+"' "+(dataSetAttrss[i]==null?"":dataSetAttrss[i])+">";
for(var j=0; j<Yset.length; j++)
{
xml += "<set value=\""+Yset[j]+"\" link=\""+(setLinks==null?"":setLinks[j])+"\" />";
//xml += "<set value='"+Yset[j]+"' link='"+(setLinks==null?"":setLinks[j])+"'/>";
//xml += "<set value='"+Yset[j]+"' link='JavaScript:alert(\'1\');'/>";
}
xml += "</dataset>";
}
if(trendLines != null)
{
xml += trendLines;
}
if(styles != null)
{
xml += styles;
}
xml += "</chart>";
var chart = new FusionCharts({type: 'mscombi2d',renderAt:containerId,width:width,height:height,dataFormat: 'xml'});
chart.setXMLData(xml);
chart.render(containerId);
}
这里的setXMLData()用于传入xm字符串。如果是引入外部的xml文件则chart.setXMLUrl()
前天的js代码
var Xdata="a;b;c;d;e;f;g";
//总数20
var Ydata='${Ydata}';
var Yname="处于该状态量|完成该状态量";
//var Ycolor="61bfad|e5e4e0|ff7900";
var Ycolor="1DA389|f7b000";
//var Ycolor="0075c2|1aaf5d";
var dataSetAttrs="showValues='1' valuePosition='auto' | renderas='area' showValues='1' Alpha='30' valuePosition='BELOW' ";//柱形|区域的属性
//showAlternateHGridColor 是否在横向网格带交替的颜色,默认为0(False)
//showLegend 显示标题
//canvasBorderColor 画布边框色 canvasBorderColor='#ffffff'
//yAxisValuesStep='1'
//showXAxisLine 显示x轴
//interactiveLegend lengend可点的?
//valuePosition='ABOVE' value的显示位置ABOVE/BELOW/AUTO
//Alpha
var chartAttrs="bgColor='#ffffff' canvasBorderColor='#ffffff' showAlternateHGridColor='0' showXAxisLine='1' showYAxisLine='1' showLegend='0' legendShadow='0' interactiveLegend='0' ";//图形的属性
//initStackedColumn2DLine("${root}", "container1", 1000, 300, Xdata, Ydata, Yname, Ycolor, chartAttrs, dataSetAttrs, null, null,null,78);
initCombineColumAndArea("${root}", "container1", 1000, 300, Xdata, Ydata, Yname, Ycolor, chartAttrs, dataSetAttrs, null, null,null,78);
html代码
<div id="container1" style="text-align:center;border:1px solid #ccc;border-bottom:none;padding:5px 5px 0px 5px;"></div>
开发过程中,可以参考官网的例子进行开发。
http://www.fusioncharts.com/javascript-chart-fiddles/?charts
图2在线测试