FusionCharts使用方法实例

最新推荐文章于 2018-03-05 15:35:37 发布

zhanghanbin_1990

最新推荐文章于 2018-03-05 15:35:37 发布

阅读量544

点赞数

本文链接：https://blog.csdn.net/u012959300/article/details/24354907

版权

下载Demo实例

FusionChart报表工具使用小结：

1.对报表的数值定义主要是配置Pie2D1.js文件
var dataString = '<chart caption ="随意填写"showPercentageInLabel= "1 "showValues="1"showLabels="0"showLegend="1"showPercentValues="1">\n\
<set value=" 0 " label=" 未确认 " color=" D4AC31 "/>\n\
<set value=" 1 " label=" 为付款 " color=" D4AC31 "/>\n\
<set value=" 2 " label=" 未发货 " color=" D4AC31 "/>\n\
<set value=" 3 " label=" 已确认 " color=" D4AC31 "/>\n\
<set value=" 4 " label=" 已付款 " color=" D4AC31 "/>\n\
<set value=" 5 " label=" 已成交 " color=" D4AC31 "/>\n\
</chart>';

2.init_FusionChart();方法根据传递的参数重新生成一个新的Pie2D1.js文件
注意：如果配置的数据量不大的话，可以每次重新生成，如果数据量大的话，仅在"</chart>';"之前追加而无需每次生成。
public void init_FusionChart(String headerName) throws IOException { //参数待定
       String[] month = { "未确认", "为付款", "未发货", "已确认", "已付款", "已成交" };
       headerName = "随意填写";
       StringBuffer strBuf = new StringBuffer();
       strBuf.append("var dataString = '<chart caption =\"" + headerName
               + "\"showPercentageInLabel= \"" + "1 " + " \"showValues=\""
               + "1" + "\"showLabels=\"" + "0" + "\"showLegend=\"" + "1"
               + "\"showPercentValues=\"" + "1\">" + "\\n\\" + "\n");
       for (int i = 0; i < month.length; i++) {
           strBuf.append("<set value=\" " + i + " \" label=\" " + month[i]
                   + " \" color=\" " + "D4AC31" + " \"/>" + "\\n\\" + "\n");
       }
       strBuf.append("</chart>';");
       System.out.println(strBuf.toString());
       String fileName = "WebContent/Includes_demo/Data/String/js/Pie2D1.js";
       File dirotry = new File("");
       String con = dirotry.getCanonicalPath();
       System.out.println(con);
       TestAppend.writeDataXML(strBuf, fileName);
   }
3.把新的生成的字符串写入Pie2D1.js文件中。
   /*
   * 将结果写入文件
   */
   private static void writeDataXML(StringBuffer buffer, String fileName) {
       String string = buffer.toString();
       PrintWriter out = null;
       try {
           out = new PrintWriter(new BufferedWriter(new OutputStreamWriter(new FileOutputStream(fileName),"UTF-8")));
           out.write(string);
       } catch (IOException e) {
           // TODO: handle exception
           System.out.println("IO 异常");
           e.printStackTrace();
       } finally {
           out.close();
       }
   }
4.前端可以就可以直接显示出配置之后的相关信息。
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
        String[] month = {"未确认","为付款","未发货","已确认","已付款","已成交"};
       String group = "Pie2D";
       request.setCharacterEncoding("utf-8");
       response.setCharacterEncoding("utf-8");
    %>
<head>
<title>Pie 2D Chart</title>
<link href="assets/ui/css/style.css" rel="stylesheet" type="text/css" />
<link href="assets/prettify/prettify.css" rel="stylesheet"
   type="text/css" />
<script type="text/javascript" src="Charts/jquery.min.js"></script>
<script type="text/javascript" src="Charts/FusionCharts.js"></script>
<script type="text/javascript" src="assets/prettify/prettify.js"></script>
<script type="text/javascript" src="assets/ui/js/json2.js"></script>
<script type="text/javascript" src="assets/ui/js/lib.js"></script>

</head>

<body>
   <h3 class="chart-title">Pie 2D Chart</h3>
   <p> </p>
   <script type="text/javascript" src="Data/String/js/Pie2D1.js"></script>

   <div id="chartdiv" align="center">Chart will load here</div>
   <script type="text/javascript">
            if (GALLERY_RENDERER && GALLERY_RENDERER.search(/javascript|flash/i)==0) FusionCharts.setCurrentRenderer(GALLERY_RENDERER);
            var chart = new FusionCharts("Charts/Pie2D.swf", "ChartId", "560", "400", "0", "0");
           chart.setXMLData( dataString );
           chart.render("chartdiv");
       </script>
   <p> </p>
   <br />
   <div class="qua-button-holder"></div>
   <div class="show-code-block"></div>
</body>