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“,这样鼠标在分割线上就会显示出来。