openflashchart2柱状图&饼状图的数据结构

1. 柱状图所需要的数据格式举例

 

柱状图数据格式

/** open flash chart 所需要的标准数据格式及属性
   {

      y_axis: {
           max: 29.158804
           steps: 4.158804
      }

      y_legend: {
           text: "s"
           style: "{font-size: 20px; color:#FF0000;}"
      }
      bg_colour: "#FFFFFF"
      offset: 5

      x_axis: {
           colour: "#000000"
           grid-colour: "#f0f0f0"
           stroke: 1
           labels: {
                 colour: "#030303"
                 labels: [
                       "bjshow"
                       "bjtest"
                       "caining"
                 ]
                 size: 12
            }
           offset: 10
      }

      elements: [

            {
                 colour: "#d01f3c"
                 text: "htc"
                 values: [
                       8.285714
                       7
                       9.594269
                  ]
                 on-show: {
                       cascade: 1
                  }
                 type: "bar_glass"
                 tip: "htc 平均摘机时长#val#s"
            }

            {
                 colour: "#356aa0"
                 text: "moto"  
                 values: [
                       4.875
                       17.5
                       4.1794124
                  ]
                 on-show: {
                       cascade: 1
                       delay: 1.5
                       type: "pop"
                  }
                 type: "bar_glass"
                 tip: "moto 平均摘机时长#val#s"
            }

            {
                 colour: "#C79810"
                 text: "nokia"


                 values: [
                       3.2222223
                       5
                       0
                 ]
                 on-show: {
                       cascade: 1
                 }
                 type: "bar_glass"
                 tip: "nokia 平均摘机时长#val#s"
            }

            {
                 colour: "#73880A"
                 text: "samsung"
                 values: [
                       5.5646257
                       2
                       24.158804
                 ]

                 on-show: {
                       cascade: 1
                       delay: 1.5
                       type: "pop"
                 }
                 type: "bar_glass"
                 tip: "samsung 平均摘机时长#val#s"
            }

            {
                 colour: "#D15600"
                 text: "zte"
                 values: [
                       5.8107142
                       0
                       6.7753844
                 ]
                 on-show: {
                       cascade: 1
                 }
                 type: "bar_glass"
                 tip: "zte 平均摘机时长#val#s"
            }
      ]
} 
*/

 

下面是通过java纯手工组装样例（具有分组功能）：

View Code

Map<Object, Object> map = new HashMap<Object, Object>();
Map<Object,Object> submap = new HashMap<Object, Object>();
map.put("bg_colour", "#FFFFFF");
map.put("offset", 5);
Map tmpmap = new HashMap();
//设置柱状图的每个Bar
        for(String key: datas.keySet()){
            submap = new HashMap<Object, Object>();
            tmpmap = new HashMap();
//显示全部柱状 所需要的时间秒数
            tmpmap.put("cascade", 1);
if ((i%2) != 0){
//符合条件的bar延迟显示
                tmpmap.put("delay", 1.5);
//动态显示方式 （pop or show-up）
//pop效果：柱状图跳跃出来
                tmpmap.put("type", "pop");
            }else{
//若手动设置为show-up 似乎无动态效果
//默认效果是：柱状图由下而上动态增长
//tmpmap.put("type", "show-up");
            }
            submap.put("on-show",tmpmap);
//柱状图bar的样式 （bar_glass or bar_3d...）
            submap.put("type", "bar_glass");
//每组柱状bar的颜色
            submap.put("colour", colors[i++]);
//标签说明 以颜色区分
            submap.put("text", key);
//鼠标划过每个bar时的提示信息
            if (type1.equals("numbers")){
                submap.put("tip", key + "  #val#%");
            }else{
                submap.put("tip", key + " \n平均摘机时长#val#s");
            }
//设置每一组数据 同一色
            submap.put("values", datas.get(key));
            list.add(submap);
        }
//设置所有数据
        map.put("elements", list);
        submap = new HashMap<Object, Object>();

//y轴的 说明 标签
        if (type1.equals("numbers")){
            submap.put("text", "%");
        }else{
            submap.put("text", "s");
        }
        submap.put("style", "{font-size: 20px; color:#FF0000;}");
        map.put("y_legend", submap);

//x轴相关设置
        submap = new HashMap<Object, Object>();
        tmpmap = new HashMap();
//x轴label
        if (labels.size() != 0){
            tmpmap.put("labels", labels);
        }else{
            labels.add("暂无数据");
            tmpmap.put("labels", labels);
        }
//label的字体大小
        tmpmap.put("size", 12);
//label颜色
        tmpmap.put("colour","#030303");
        submap.put("labels", tmpmap);
        submap.put("offset", 10);
        submap.put("stroke", 1);
//x轴的颜色
        submap.put("colour","#000000");
//平行于y轴的背景网格线的颜色
        submap.put("grid-colour","#f0f0f0");
        map.put("x_axis", submap);

//y轴相关设置
        submap = new HashMap<Object, Object>();
if (type1.equals("numbers")){
//y轴数据的步进值
            submap.put("steps", 10);
//y轴数据的最大值
            submap.put("max", 100);
        }else{
            submap.put("steps", max/5);
            submap.put("max", max + 5);
        }
        map.put("y_axis", submap);

return map;

 

2. 饼状图数据格式：

饼状图数据格式

/**
    {  
        "title":{  
          "text":"Pie for you sir?",  
          "style":"{font-size: 30px;}"  
        },  

        "elements":[  
          {  
            "type":"pie",  
            "colours":[  
                  "0x336699", "0x88AACC", "0x999933", "0x666699",  
                  "0xCC9933", "0x006666", "0x3399FF", "0x993300",  
                  "0xAAAA77", "0x666666", "0xFFCC66", "0x6699CC",  
                  "0x663366", "0x9999CC", "0xAAAAAA", "0x669999",  
                  "0xBBBB55", "0xCC6600", "0x9999FF", "0x0066CC",  
                  "0x99CCCC", "0x999999", "0xFFCC00", "0x009999",  
                  "0x99CC33", "0xFF9900", "0x999966", "0x66CCCC",  
                  "0x339966", "0xCCCC33"],  
            "alpha":0.8,  
            "animate":[       
                {  
                    "type":"bounce",  
                    "distance":20       
                },  
                {  
                    "type":"fade"      
                }  
            ],  
            "radius": 150,        
            "tip":"#val#<br>#total#<br>#percent#<br>#label#",      
            "gradient-fill":true,      
            "label-colour":"#0000ff",      
            "start-angle":90,          
            "no-labels":false,          
            "values":[  
              2,  
              3,  
              {"value":6.5,"label":"hello (#val#)", "tip":"99 bottles of beer","on-click":"http://www.baidu.com"},  
              {"value":6.5,"on-click":"my_function"}  
            ]  
          }  
        ]  
      }  
*/

java后台数据组装：

play-1.2

public static void pieData(){
        Map map = new HashMap();
        Map tmp = new HashMap();
        tmp.put("text", "饼图测试");
        map.put("title", tmp);
        map.put("bg_colour", "#ffffff");
        List list = new ArrayList();
        Map elements = new HashMap();
        elements.put("type", "pie");
        elements.put("tip", "#val#<br>#total#<br>#percent#<br>#label#");
        List colours = Arrays.asList(colors1);
        elements.put("colours", colours);
        elements.put("alpha", 0.5);
        List animates = new ArrayList();
        tmp = new HashMap();
        tmp.put("type", "bounce");
        tmp.put("distance", 20);
        animates.add(tmp);
        tmp = new HashMap();
        tmp.put("type", "fade");
        animates.add(tmp);
        elements.put("animate", animates);
        elements.put("radius", 150);
        elements.put("start-angle", 90);
        elements.put("gradient-fill", true);
        elements.put("no-labe-ls", false);
        List v = new ArrayList();
for (int i = 0; i <= 10; i++) {
            tmp = new HashMap();
            tmp.put("value", i+10);
            tmp.put("label", "摘机次数统计占比xxxx");
            v.add(tmp);

        }

        elements.put("values", v);
        list.add(elements);
        map.put("elements", list);
        System.out.println(map);
        renderJSON(map);
    }

转载于:https://www.cnblogs.com/Use-left-hand-write-love/archive/2011/11/24/2261390.html