FusionCharts--向下钻取与单击事件

    在FusionCharts中有一种特有的方法--向下钻取,应用此方法,我们可以将任意图表转换成一个热点或链接。这样能给我们的图形带来更好的视觉效果与功能效果。

    向下钻取主要有两种方法,一种是简单简单链接,一种是图表链接。图表链接可以从图表链接到图表(有兴趣的可以自己试试,本篇就不再介绍),下面我们注意说一下简单链接与图表获取单击事件。

    使用XML文件进行设置连接:      

<?xml version="1.0" encoding="utf-8" ?>
<graph baseFont='SunSim' baseFontSize='12' caption='分析' subcaption='' yAxisMinValue='51650.1' yAxisMaxValue='71118.3' xaxisname='日期' yaxisname='数量' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='1' numdivlines='10' numVdivlines='0' shownames='1' rotateNames='1'>
  <set name='2009-10-04' value='57653' color='AFD8F8' link='Index.html'/>
  <set name='2009-10-05' value='57389' color='F6BD0F' link='j-myJS-1079'/>
  <set name='2009-10-06' value='59256' color='8BBA00'/>
  <set name='2009-10-07' value='62762' color='FF8E46'/>
  <set name='2009-10-08' value='63287' color='008E8E'/>
  <set name='2009-10-09' value='60109' color='D64646'/>
  <set name='2009-10-10' value='64653' color='8E468E'/>
  <set name='2009-10-11' value='61687' color='588526'/>
</graph>
    在XML元素中,加入link标签,如果是想跳转页面,只需要写上要跳转的页面即可。若要获取单击事件,我们可以使用link="j-myJS-1079",其中j表示我们使用的是js,固定形式;myJS是自己前台要写的js函数名称;1079是自己要传递的参数,多个参数可以使用逗号隔开。

    前台js函数:      

<script>
        function myJS(myVar) {
            alert(myVar);          
        }       

    </script>
     其效果如下:

       


    使用json串实现单击事件也是类似,只需要在转json的过程中加入link标签,然后可以设置需要传递的参数 (部分代码,完整代码请看上篇)   

 //设置系列中的内容
            jsonBuilder.Append(""dataset": [");
            for (int i = 0; i < dt.Columns.Count - 1; i++)
            {
                //设置各系列值
                jsonBuilder.Append("{"seriesname":"");
                jsonBuilder.Append(dt.Columns[i + 1].ColumnName);
                jsonBuilder.Append("","data": [");
                for (int j = 0; j < dt.Rows.Count; j++)
                {
                    jsonBuilder.Append("{"value": "");
                    jsonBuilder.Append(dt.Rows[j][i + 1].ToString());
                    jsonBuilder.Append("" ,");
                    jsonBuilder.Append(" "link":"j-myJS-");
                    jsonBuilder.Append(dt.Columns[i + 1].ColumnName);
                    jsonBuilder.Append(",");
                    jsonBuilder.Append(dt.Rows[i][0].ToString());
                    jsonBuilder.Append(""},");

                    //jsonBuilder.Append("{"value": "");
                    //jsonBuilder.Append(dt.Rows[j][i + 1].ToString());

                    //jsonBuilder.Append(""},");
                }
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("]},");
            }
    在往json串中添加时,需要注意添加的位置,需要设置在系列值中。

  

   小结:

      初次接触FusionCharts时,挺陌生的,尤其是在项目中应用。一方面是项目重新封装,另一方面是实际操作能力,但是随着不断的接触学习,对它的理解也不断加深,使用的熟练程度也不断提高。在这个过程中,一定要多看使用文档,会给我的理解带来极大的方便。

    

原文地址:https://www.cnblogs.com/victor-grace/p/7253738.html