前面介绍的FusionCharts都是对FusionCharts的基本属性进行操作,下面几篇博文就FusionCharts的高级特性做一个介绍,包括:添加下钻链接、使用Style样式定制图表、网格组件的使用、导出为图片等等。 在我们开发的过程中,我们可能会需要这样一种需求。当客户点击图表的某个柱子时或者圆饼时,可以看到更加详细的信息。对于这样的需求我们称之为下钻。FusionCharts对下钻提供了非常好的支持。在前面我们就知道使用FusionCharts我们只需要关心数据是如何产生的,不需要关系图像是如何生成的,所以下钻对于FusionCharts是非常简单的。对于FusionCharts下钻而言我们只需要添加一个链接即可。 FusionCharts目前支持一下几种下钻形式。 1、 同一窗口实现钻取 2、 新窗口中实现钻取 3、 在指定的frame中实现钻取 4、 在弹出窗口实现钻取 5、 触发js函数 一、 同一窗口实现下钻想要在FusionCharts中添加链接非常简单,在<set…/>元素中添加link属性即可。如下 <chart caption='Decline in Net Interest Margins of Banks (1995-2005)'> <set label='Spain' value='56' color='F6BD0F' link='../myFusionChart_02/newLink.html'/> <set label='Germany' value='25' color='FF6600' link='showDetailFCS%3Fname%3DGermany'/> <set label='France' value='36' color='8BBA00'link='../myFusionChart_02/newLink.html'/> <set label='Italy' value='22' color='F984A1' link='showDetailFCS%3Fname%3DItaly'/> <set label='Holland' value='98' color='A66EDD'link='../myFusionChart_02/newLink.html'/> <set label='Denmark' value='56' color='B2FF66' link='../myFusionChart_02/newLink.html'/> <set label='Sweden' value='44' color='AFD8F8' link='showDetailFCS%3Fname%3DSweden'/> </chart> 如果把上面的数据用柱状图像来显示的话,就如下图。 当我们把鼠标放在柱子上面时,鼠标会变成链接的形式,点击就可以进入新的页面。 可能有朋友对上面某些link的形式不理解。其实在前面就已经提过由于xml对特殊字符?、&、=不能识别,所以FusionCharts对这些不能支持的特殊字符提供了转义的支持。所以如果link链接中存在如?、&等特殊字符,我们就需要进行解码操作了。 对于:link='showDetailFCS%3Fname%3DSweden'转义之后就会变成: link='showDetailFCS?name=Sweden'。 二、 新窗口中实现下钻要在新窗口中实现钻取,只需要在link属性的链接值中添加n-即可。如: <set label='France' value='36' color='8BBA00'link='n-../myFusionChart_02/newLink.html'/> Xml Example: <chart caption='Decline in Net Interest Margins of Banks (1995-2005)'> <set label='Spain' value='56' color='F6BD0F' link='n-../myFusionChart_02/newLink.html'/> <set label='Germany' value='25' color='FF6600' link='n-../myFusionChart_02/newLink.html'/> <set label='France' value='36' color='8BBA00'link='n-../myFusionChart_02/newLink.html'/> <set label='Italy' value='22' color='F984A1' link='n-../myFusionChart_02/newLink.html'/> <set label='Holland' value='98' color='A66EDD'link='n-../myFusionChart_02/newLink.html'/> <set label='Denmark' value='56' color='B2FF66' link='n-../myFusionChart_02/newLink.html'/> <set label='Sweden' value='44' color='AFD8F8' link='n-../myFusionChart_02/newLink.html'/> </chart> 三、 在指定的frame中实现钻取要在frame中显示钻取图像,需要在link属性中添加F-name,其中name表明frame的名称。所以link为:F-frameName.. /myFusionChart_02/newLink.html。 Example XML: <chart caption='Decline in Net Interest Margins of Banks (1995-2005)'> <set label='Spain' value='26' color='F6BD0F' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/> <set label='Germany' value='25' color='FF6600' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/> <set label='France' value='36' color='8BBA00'link='F-newLinkFrame-../myFusionChart_02/newLink.html'/> <set label='Italy' value='22' color='F984A1' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/> <set label='Holland' value='44' color='A66EDD'link='F-newLinkFrame-../myFusionChart_02/newLink.html'/> <set label='Denmark' value='36' color='B2FF66' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/> <set label='Sweden' value='44' color='AFD8F8' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/> </chart> Html: <html> <head> </head> <frameset rows="350,*" cols="*" frameborder="YES" border="1" framespacing="0"> <frame src="../myFusionChart_02/myFusionChart_02.html" name="myFusionChartFrame" scrolling="Auto" noresize > <frame src="" name="newLinkFrame" scrolling="Auto" noresize> </frameset> </html> 点击之前 点击之后 四、 在弹出窗口实现钻取在弹出窗口实现钻取使用p-。例如 <set label='Spain' value='26' color='F6BD0F' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> 这里P-表示在弹出窗口中显示。 111111表示弹出窗口的名字。 width=600,height=500,toolbar=no, scrollbars=no:弹出窗口的各个属性值。 resizable=no-../myFusionChart_02/newLink.html 链接的内容 可指定弹出窗口的属性: height:弹出窗口高度,pixels width: 宽度 resizable:窗口大小是否可变,若=yes表示可通过拖动边或角进行窗口的放大或缩小;Value = yes or no, 1 or 0. Scrollbars:是否显示横向和纵向滚动条,Value = yes or no, 1 or 0. Menubar:是否在顶部显示菜单栏,Value = yes or no, 1 or 0. Toolbar:是否显示工具条,包括前进、后退、停止等工具按钮,Value = yes or no, 1 or 0. Location:是否显示url地址栏,Value = yes or no, 1 or 0. Directories:是否显示附加工具条,Value = yes or no, 1 or 0. Status:是否在页面下方显示状态栏, Value = yes or no, 1 or 0. Left:指定弹出窗口距左侧宽度,单位pixels,此属性应用于IE,Netscape用screenX Top:指定弹出窗口距顶部宽度,单位pixels,此属性应用于IE,Netscape用screenY Fullscreen:是否以全屏打开,只用于ie; <chart caption='Decline in Net Interest Margins of Banks (1995-2005)'> <set label='Spain' value='26' color='F6BD0F' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> <set label='Germany' value='25' color='FF6600' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> <set label='France' value='36' color='8BBA00'link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> <set label='Italy' value='22' color='F984A1' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> <set label='Holland' value='44' color='A66EDD'link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> <set label='Denmark' value='36' color='B2FF66' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> <set label='Sweden' value='44' color='AFD8F8' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> </chart> 五、 触发js函数除了使用上面的链接形式,FusionCharts还支持javascript函数来触发。使用方法 <set label='USA' value='235' link="j- showData (' Spain’,26)"/> j-:触发js函数myJS(),注意,其中不能用分号。 或者 <set label='USA' value='235' link=" JavaScript:showData('Spain,26')"/> FusionCharts v3.1以上版本,还可用下面这种形式j-{user function name}-{parameter}: <set label='USA' value='235' link="j- showData – Spain,26"/> Example XML <chart caption='Decline in Net Interest Margins of Banks (1995-2005)'> <set label='Spain' value='26' color='F6BD0F' link="JavaScript:showData('Spain,26')"/> <set label='Germany' value='25' color='FF6600'link="JavaScript:showData('Germany,25')"/> <set label='France' value='36' color='8BBA00'link="JavaScript:showData('France,36')"/> <set label='Italy' value='22' color='F984A1' link="JavaScript:showData('Italy,22')"/> <set label='Holland' value='44' color='A66EDD'link="JavaScript:showData('Holland,44')"/> <set label='Denmark' value='36' color='B2FF66'link="JavaScript:showData('Denmark,36')"/> <set label='Sweden' value='44' color='AFD8F8' link="JavaScript:showData('Sweden,44')"/> </chart> HTML <html> <head> <title>这是第一个fusionChart 图形</title> <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script> <script> function showData(value){ alert(value); } </script> </head> <body bgcolor="#ffffff"> <div id="chartdiv_01" align="center"></div> <script type="text/javascript"> var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId_01", "600", "500"); myChart.setDataURL("Data.xml"); myChart.render("chartdiv_01"); </script> </body> </html> |
|