fusionChart 图表插件我们要显示漂亮的图表就来看看

最新推荐文章于 2021-07-29 16:16:00 发布

aini2749

最新推荐文章于 2021-07-29 16:16:00 发布

阅读量135

点赞数

文章标签： json 测试 javascript ViewUI

原文链接：http://www.cnblogs.com/jiagoushi/archive/2013/02/04/2892227.html

版权

Fusionchart插件是用来显示各种各样的图表的有用插件，我们有必要为了以后我们显示图表的时候少走弯路，来了解一下这个插件的使用。首先我们来看一下FusionChart插件可以用来显示的图表类型，我在这里只是列举几个图表类型，因为FusionChart支持很多种图表的输出，所以我们仅仅用来说明几个图表类型。

2D柱状图

3D柱状图

3D饼图

2D折线图

我再这里只是简单的列举了几个常用的图表类型，当然还会有很多图表我们会用到，但是FusionChart插件，如果我们可以熟练使用其中一种，那么对于其他的图表类型都是小菜一碟，所以我们拿出来一个图表饼图作为例子。因为FusionChart接受xml格式和json两种格式，所以我们在例子中采用这两种格式的数据作为数据源来显示图表。

首先我们需要从官网下载一个实例程序，里面会包括一个FusionCharts目录，这个目录就是我们要在项目中使用的插件，其中里面有一个特别重要的js文件FusionChart.js,我们在页面上对于图表的控制显示都是通过这个js文件来操作。剩下的就是一些swf文件，它们是用来呈现图表的。

有一点我们注意一下：就是我们在项目中尽可能的添加目录的命名为FusionCharts，因为如果命名不是这样，可能会遇到一些问题，当然这存在偶然性。

因为我的示例采用的是MVC3 ，所以有些地方的标签会有些不同，但是不影响总体的理解。

我们首先在项目中添加一个FusionCharts目录，然后把下载到的FusionCharts目录中的内容全部拷贝到项目中。

然后可以使用图表进行显示。

 1 @{
 2     Layout = null;
 3 }
 4 
 5 <!DOCTYPE html>
 6 <html>
 7 <head>
 8     <title>Index</title>
 9     <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.5.1.js"></script>
10     <script type="text/javascript" src="http://www.cnblogs.com/FusionCharts/FusionCharts.js"></script>
11     <script type="text/javascript">
12         $(function () {
13             var chart = new FusionCharts("http://www.cnblogs.com/FusionCharts/pie3d.swf", "chart1", "800", "600", "0");
14             chart.setXMLUrl("http://www.cnblogs.com/data/data.xml");
15             chart.render("divChart");
16 
17         });
18     
19     
20     </script>
21 </head>
22 <body>
23 <div id="divChart"></div>
24 </body>
25 </html>

其中这里有一个js方法，我们在这里有一个问题需要注意，如果不采用jquery的$();方法，那么我们必须把哪个渲染输出图表的js放到<div id="divChart" 后面，其中divChart就是要显示的图表的占位符。

pie3D.swf 表示的就是fusionChart的3D饼图，我们设置数据源为data.xml。然后通过render渲染输出，应该说比较简单易懂，我们来定义data.xml文件中的内容，这是操作fusionChart的核心。

 1 <?xml version="1.0" encoding="utf-8" ?>
 2 <chart caption="中国强大" subCaption="中国是世界霸主"
 3        showBorder="1" startingAngle="70" bgAngle="360" bgRatio="0,100" bgColor="99ccff,ffffff"
 4        enableRotation="1" enableSmartLabels="1" decimals="0" palette="4" 
 5        formatNumberScale="0">
 6   <set label="中国" value="130000"/>
 7   <set label="美国" value="20000"/>
 8   <set label="法国" value="12000"/>
 9   <set label="俄罗斯" value="1400"></set>  
10 </chart>

其中最令人恶心的就是这里面的各种参数，我们把实例中的参数说明一下。

chart 这个应该是xml的根，是fusonChart定义的，我们在原来的版本中也可以使用graph，当然现在如果使用graph也可以，但是不推荐
caption 标题，表示的是图表显示的标题
subCaption 副标题注意：xml是不区分大小写的
showBorder是否显示边框为1 在fusionChart中如果为true，即可以设置为1，为false则是0
startingAngle 初始的角度这是相对饼图来说的其他图表可能用不到这个参数
bgAngle 背景角度
bgRatio 背景比例，这是一个范围值，表示从0到100范围内逐渐更改有过度效果
bgColor 背景颜色，这个也是一个范围值，表示一个逐渐更改的颜色，当然也可以只设置一个值，就表示唯一值，没有过度效果
enableRotation 是否允许旋转为1表示可以旋转为0则不允许旋转
decimals 举个例子来说，就是说如果一个数值为999.999，如果decimals设置为0.则显示的结果就是999.可以理解成小数位数
palette 表示采用的风格，当然是fusionChart内置的风格，从1到4
formatNumberScale 这个参数有时特别有用。比如说我们有一个值为1000，如果设置这个参数为0，则显示的时候就是1000，但是如果我们设置为1，那么显示出来就是1K。
set表示一个定位符，用来赋值
set-->label 表示的是name值，在以前的版本中就是name，但是在新版本中更新成了label，就是表示name 名称
set-->value 表示label设置的值的value

好了，一共就这么几个参数，等等，我突然想到两个参数，就是x轴和y轴的名称。XAxisName和YAxisName，因为这是饼图没有x和y轴之说。所以我就不在实例中添加了。来看一下实际效果。

以上是通过xml格式来作为数据源，我们在项目中json也很经常用到，所以下面我们来说明一下json的使用，为了加上x和y轴，我们采用柱状图。

我们首先在HomeController中定义一个Action 返回json字符串。注意：返回的是字符串不是jsonResult，当然如果你可以拼接出对应的json值就可以。

1   public string Json()
2         {
3             string json = "{\"chart\":{\"caption\":\"Weekly Sales Summary\",\"xAxisName\":
                      \"Week\",\"yAxisName\":\"Sales\",\"numberPrefix\":\"$\" },
            \"data\":[{\"label\":\"Week 1\",\"value\":\"14400\"},{\"label\":\"Week 2\",
          \"value\":\"19600\"},{\"label\":\"Week 3\",\"value\":\"24000\"},
          {\"label\":\"Week 4\",\"value\":\"15700\"}]}";
4             return json;
5         }

前台页面我们需要设置图表的json 数据源为这个Action

 1 @{
 2     Layout = null;
 3 }
 4 <!DOCTYPE html>
 5 <html>
 6 <head>
 7     <title>Index</title>
 8     <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.5.1.js"></script>
 9     <script type="text/javascript" src="http://www.cnblogs.com/FusionCharts/FusionCharts.js"></script>
10     <script type="text/javascript">
11         $(function () {
12             var chart = new FusionCharts("http://www.cnblogs.com/FusionCharts/column2d.swf", "chart1", "800", "600", "0");
13 //            chart.setXMLUrl("http://www.cnblogs.com/data/data.xml");
14 //            chart.render("divChart");
15 
16             chart.setJSONUrl("@Url.Action("json", "home")");
17             chart.render("divChart");
18         });
19     
20     
21     </script>
22 </head>
23 <body>
24     <div id="divChart">
25     </div>
26 </body>
27 </html>

这个显示的是柱状图

哪两个坐标就是我们刚才提出的名称，好了，就说这么多，如果你用到这个插件，还是去官网好好的研究一下参数就可以搞定。很简单。

转载于:https://www.cnblogs.com/jiagoushi/archive/2013/02/04/2892227.html

aini2749

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
fusionChart 图表插件我们要显示漂亮的图表就来看看

Fusionchart插件是用来显示各种各样的图表的有用插件，我们有必要为了以后我们显示图表的时候少走弯路，来了解一下这个插件的使用。首先我们来看一下FusionChart插件可以用来显示的图表类型，我在这里只是列举几个图表类型，因为FusionChart支持很多种图表的输出，所以我们仅仅用来说明几个图表类型。2D柱状图 3D柱状图3D饼图2D折...
复制链接

扫一扫