FusionCharts使用JSON数据源示例以及对趋势线的应用

1，针对fusioncharts的应用jar文件导出在这里就不多说了，网上详细的讲解很多。

2，在这里只是简单展示一下json格式的数据结构以及对趋势线的应用。

----------------------------------------------华丽的分割线----------------------------------------------------------------

1，json的数据结构展示：

//使用json数据  
        var  MSLine = new FusionCharts("flex/fusioncharts/MSLine.swf", "MSLineID", "460", "350", "0", "1");   MSLine.setJSONData({      
             "chart":{      
                    "caption":"Business Results 2005 v 2006",     
                    "xaxisname":"Month",     
                    "yaxisname":"Revenue",    
                    "showvalues":"0",      
                    "numberprefix":"$"  },    
             "categories":[{       
                 "category":[  
                                 {          "label":"Jan"        },      
                                 {          "label":"Feb"        },      
                                 {          "label":"Mar"        },        
                                 {          "label":"Apr"        },      
                                 {          "label":"May"        },      
                                 {          "label":"Jun"        },      
                                 {          "label":"Jul"        },      
                                 {          "label":"Aug"        },      
                                 {          "label":"Sep"        },      
                                 {          "label":"Oct"        },      
                                 {          "label":"Nov"        },       
                                 {          "label":"Dec"        }]      
               }  
               ],   
             "dataset":[        
                          {     
                              "seriesname":"2006",      
                              "data":[  
                                     {          "value":"27400"        },       
                                     {          "value":"29800"        },   
                                     {          "value":"25800"        },          
                                     {          "value":"26800"        },          
                                     {          "value":"29600"        },          
                                     {          "value":"32600"        },          
                                     {          "value":"31800"        },          
                                     {          "value":"36700"        },          
                                     {          "value":"29700"        },          
                                     {          "value":"31900"        },          
                                     {          "value":"34800"        },          
                                     {          "value":"24800"        }      ]    },    
                           {   "seriesname":"2007",      
                               "data":[  
                                     {          "value":"27900"        },       
                                     {          "value":"29800"        },   
                                     {          "value":"15800"        },          
                                     {          "value":"24800"        },          
                                     {          "value":"19600"        },          
                                     {          "value":"32600"        },          
                                     {          "value":"35800"        },          
                                     {          "value":"31700"        },          
                                     {          "value":"39700"        },          
                                     {          "value":"51900"        },          
                                     {          "value":"14800"        },          
                                     {          "value":"20800"        }      ]    },    
                           {   "seriesname":"2005",       
                               "data":[{        "value":"10000"        },         
                                     {          "value":"11500"        },          
                                     {          "value":"12500"        },          
                                     {          "value":"15000"        },          
                                     {          "value":"11000"        },          
                                     {          "value":"9800"         },          
                                     {          "value":"11800"        },          
                                     {          "value":"19700"        },          
                                     {          "value":"21700"        },          
                                     {          "value":"21900"        },          
                                     {          "value":"22900"        },          
                                     {          "value":"20800"        }      ]    }  ],   
                    "trendlines":{      
                       "line":[{        "startvalue":"26000",         
                                        "color":"91C728",         
                                        "displayvalue":"Target",         
                                        "showontop":"1"        
                       }]  
                     },    
                    "styles":[{        
                       "definition":[{            
                               "style":[{          "name":"CanvasAnim",  
                                                   "type":"animation",                
                                                   "param":"_xScale",                
                                                   "start":"0",                
                                                   "duration":"1"              
                                        }]  
                       }],        
                    "application":[{              
                               "apply":[{         "toobject":"Canvas",                
                                                  "styles":"CanvasAnim"              
                                         }]          
                       }]  
                     }]  
            });  

2，大家注意json格式数据结构中【trendlines】属性：

该属性就是设置趋势线，数据结构也是集合类型的，可以通过这是多条趋势线来展示在你的柱状图上，例如设置最大值、最小值、平均值的分割线。

效果图如下：

大家看到绿色的分割线了吗，就是趋势线的效果。可以根据实际情况设置多条趋势线。

3，对趋势线中属性的理解：

startvalue：设置分割线的值

color：设置分割线的颜色

displayvalue：设置分割线y轴上名称

showontop：设置分割线显示

tooltext：设置分割线上显示的值，例如：tooltext：”最大值：23“，这样鼠标在分割线上就会显示出来。