• AnyChart使用指南三:生成动态图像


    AnyChart主要工作原理是有一个.swf文件作为对象,数据和设置存放在.xml文件中,然后在.html文件里通过JS来调用,生成动态图像。

    由于想使用到struts中去,xml文件自动生成,有个叫jdom的包能够实现这样的功能,于是在网上找jdom的使用教程,终于写好了第一个生成xml的java文件,示例代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    java:import java.io.FileWriter;
    import org.jdom.Document;
    import org.jdom.Element;
    import org.jdom.output.Format;
    import org.jdom.output.XMLOutputter;
    import com.whbs.xz.oswf.actionforms.WFStatisticForm;
    import java.util.ArrayList;
    import org.jdom.Text;
    public class CreateXMLChart {
    public static void createPieChart(ArrayList al) {
    try {
    Document doc = new Document();             //构建xml框架
    Element root = new Element("root");
    doc.setRootElement(root);             Element TYPE = new Element("type");
    Element DATA = new Element("data");
    Element OBJECTS = new Element("objects");             Element et1 = new Element("system"); //TYPE
    Element et2 = new Element("workspace");
    Element et3 = new Element("chart");
    Element et4 = new Element("legend");//文字区域set中文字的输出
    Element et5 = new Element("block"); //DATA
    Element et6 = new Element("text"); //OBJECTS             Element es1 = new Element("refresh"); //et1
    Element es2 = new Element("background"); //et2
    Element es3 = new Element("chart_area");
    Element es4 = new Element("base_area");//底部区域
    Element es5 = new Element("animation"); //et3
    Element es6 = new Element("names");
    Element es7 = new Element("values");
    Element es8 = new Element("pie_chart");
    Element es9 = new Element("hints");
    Element es10 = new Element("background"); //et4
    Element es11 = new Element("border");
    Element es12 = new Element("scroller");
    Element es13 = new Element("names");
    Element es14 = new Element("values");
    Element es15 = new Element("header");
    Element es16 = new Element("font"); //et5
    Element es17 = new Element("border");             Element ef1 = new Element("colors");
    Element ef2 = new Element("alphas");
    Element ef3 = new Element("ratios");
    Element ef4 = new Element("matrix");
    Element ef5 = new Element("border");
    Element ef6 = new Element("border");
    Element ef7 = new Element("background");            Element ee1 = new Element("color").addContent("0xFFFFFF");
    Element ee2 = new Element("color").addContent("0xF4E1C4");
    Element ee3 = new Element("alpha").addContent("100");
    Element ee4 = new Element("alpha").addContent("100");
    Element ee5 = new Element("ratio").addContent("0");
    Element ee6 = new Element("ratio").addContent("0xFF");             root.addContent(TYPE);
    root.addContent(DATA);
    root.addContent(OBJECTS);             TYPE.addContent(et1);
    TYPE.addContent(et2);
    TYPE.addContent(et3);
    TYPE.addContent(et4);
    DATA.addContent(et5);
    OBJECTS.addContent(et6);             et1.addContent(es1);
    et2.addContent(es2);
    et2.addContent(es3);
    et2.addContent(es4);
    et3.addContent(es5);
    et3.addContent(es6);
    et3.addContent(es7);
    et3.addContent(es8);
    et3.addContent(es9);
    et4.addContent(es10);
    et4.addContent(es11);
    et4.addContent(es12);
    et4.addContent(es13);
    et4.addContent(es14);
    et4.addContent(es15);             //设置数据处
    for (int i = 0; i < al.size(); i++) {
    Element SET = new Element("set");
    SET.setAttribute("name", "column " + i);
    SET.setAttribute("value", "" + al.get(i));
    SET.setAttribute("color", "0xAFD8F8");
    et5.addContent(SET);
    }             et6.addContent(es16);
    et6.addContent(es17);             es2.addContent(ef1);
    es2.addContent(ef2);
    es2.addContent(ef3);
    es2.addContent(ef4);
    es8.addContent(ef5);
    es9.addContent(ef6);
    es9.addContent(ef7);             ef1.addContent(ee1);
    ef1.addContent(ee2);
    ef2.addContent(ee3);
    ef2.addContent(ee4);
    ef3.addContent(ee5);
    ef3.addContent(ee6);             //设置标签中的属性
    et3.setAttribute("type", "3DPie"); //chart
    et4.setAttribute("enabled", "yes"); //legend
    et4.setAttribute("x", "22");
    et4.setAttribute("y", "60");
    et6.setAttribute("text", "sillyPieChart"); //text
    et6.setAttribute("auto_size", "yes");
    et6.setAttribute("x", "20");
    et6.setAttribute("y", "380");
    et6.setAttribute("url", "./pieChart.xml");             es1.setAttribute("enabled", "yes"); //refresh
    es2.setAttribute("enabled", "yes"); //background
    es2.setAttribute("type", "gradient");
    es2.setAttribute("gradient_type", "linear");
    es3.setAttribute("width", "400"); //chart_area
    es3.setAttribute("height", "240");
    es3.setAttribute("x", "20");
    es3.setAttribute("y", "30");
    es3.setAttribute("enabled", "no");
    es4.setAttribute("enabled", "no"); //base_area
    es5.setAttribute("enabled", "yes"); //animation
    es5.setAttribute("speed", "10");
    es5.setAttribute("type", "step");
    es6.setAttribute("show", "no"); //names
    es7.setAttribute("show", "no"); //values
    es7.setAttribute("postfix", "%");
    es8.setAttribute("radius", "100"); //pie_chart
    es8.setAttribute("x", "340");
    es8.setAttribute("y", "150");
    es8.setAttribute("rotation", "360");
    es9.setAttribute("width", "170"); //hints
    es10.setAttribute("enabled", "no"); //background
    es11.setAttribute("enabled", "no"); //border
    es12.setAttribute("enabled", "no"); //scroller
    es13.setAttribute("width", "120"); //names
    es14.setAttribute("width", "40"); //values
    es15.setAttribute("values", "%"); //header
    es15.setAttribute("names", "Name");
    es16.setAttribute("size", "12"); //font
    es16.setAttribute("align", "center");
    es16.setAttribute("type", "Verdana");
    es17.setAttribute("enabled", "no"); //border             ef4.setAttribute("r", "1.7"); //matrix
    ef5.setAttribute("enabled", "yes"); //border
    ef5.setAttribute("color", "0xF4E1C4");
    ef6.setAttribute("color", "0xB54001"); //border
    ef7.setAttribute("background", "0xF4E1C4"); //background             Format format = Format.getCompactFormat();
    format.setEncoding("gb2312"); //设置xml文件的字符为gb2312
    format.setIndent("    ");             XMLOutputter outputter = new XMLOutputter(format);             outputter.output(doc,
    new FileWriter(
    "E:/JBWorkplaces/osworkflow-xml/xz/xz/oswf/pieChart.xml"));
    } catch (Exception e) {
    System.out.println(e);
    }
    }
    }

    生成的xml文件如下:

    <?xml version="1.0" encoding="gb2312"?>
    <root>
    <type>
    <system>
    <refresh enabled="yes" />
    </system>
    <workspace>  //整个工作区
              <background enabled="yes" type="gradient" gradient_type="linear">
    <colors>
    <color>0xFFFFFF</color>
    <color>0xF4E1C4</color>
                 </colors>
    <alphas>
    <alpha>100</alpha>
    <alpha>100</alpha>
                 </alphas>
    <ratios>
       <ratio>0</ratio>
    <ratio>0xFF</ratio>
                 </ratios>
    <matrix r="1.7" />
    </background>
    <chart_area width="400" height="240" x="20" y="30" enabled="no" />
    <base_area enabled="no" />
    </workspace>
    <chart type="3DPie">  //输出图形部分
              <animation enabled="yes" speed="10" type="step" />
    <names show="no" />
    <values show="no" postfix="%" />
    <pie_chart radius="100" x="340" y="150" rotation="360">
    <border enabled="yes" color="0xF4E1C4" />
    </pie_chart>
    <hints width="170">
    <border color="0xB54001" />
    <background background="0xF4E1C4" />
    </hints>
    </chart>
    <legend enabled="yes" x="22" y="60">  //输出文字部分
              <background enabled="no" />
    <border enabled="no" />
    <scroller enabled="no" />
    <names width="120" />
    <values width="40" />
    <header values="%" names="Name" />
    </legend>
    </type>
    <data>
    <block>
    <set name="column 0" value="4" color="0xAFD8F8" />
    <set name="column 1" value="17" color="0xAFD8F8" />
    </block>
    </data>
    <objects>
    <text text="sillyPieChart" auto_size="yes" x="20" y="380" url="./pieChart.xml">
    <font size="12" align="center" type="Verdana" />
    <border enabled="no" />
    </text>
    </objects>
    </root>

     

  • 相关阅读:
    【赵强老师】使用Docker Compose进行服务编排
    【赵强老师】Weblogic域和域的组成
    【赵强老师】管理Docker镜像
    3. 清理统一审计 AUD$UNIFIED 基表部份数据
    4. AUD$UNIFIED 基表及 分区键创建索引
    2.更改统一审计AUD$UNIFIED基表 默认表空间
    1.更改统一审计AUD$UNIFIED 分区为1天
    9. 将APEX18.2 升级到 APEX19.2 详细步骤
    1.2 安装中文语言包
    通过VBOX 导入系统工具 搭建APEX开发环境
  • 原文地址:https://www.cnblogs.com/flashcharts/p/Anychart_dynamicImage.html
Copyright © 2020-2023  润新知