FusionCharts与jQuery-显示Chart的几种方法

最新推荐文章于 2021-02-13 11:21:33 发布

零点起航

最新推荐文章于 2021-02-13 11:21:33 发布

阅读量2.4k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/csyuyaoxiadn/article/details/8632598

版权

web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

FusionCharts 提供几种方法在HTML元素中显示charts。以下三种方式均可在实现：

1. insertFusionCharts: 在指定的容器元素中添加charts，charts将替换原来的内容。

2. appendFusionCharts: 向指定的容器元素末尾追加charts，不会替换原来的元素。

3. prependFusionCharts：在指定容器元素的开始位置追加charts，不会替换原来的元素。

配置FusionCharts jQuery插件

配置FusionCharts jQuery插件非常容易。步骤如下：

1. 复制所有必须的SWF文件到你指定的文件夹

2. 复制FusionCharts.js 、jquery.min.js 和FusionCharts.jqueryplugin.js到指定文件夹

3. 复制FusionCharts.HC.js 和FusionCharts.HC.Charts.js 到指定文件夹

4. 在JavaScript文件中应用所有必须的js文件。示例如下：

接下来，我们将学习以上三种方法的具体使用。

Data.xml文件如下：

使用insertFusionCharts方法

insertFusionCharts方法是显示charts的基本方法。使用时，必须使用jQuery选择指定的HTML元素。如果一次选择了多个元素，则每个元素中都会添加charts。而且该方法，将替换HTML元素中原来的所有元素。实例如下：

<html>
  <head>
    <title>My First chart using FusionCharts</title>
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
    <script type="text/javascript" src="FusionCharts/jquery.min.js"></script>
    <script type="text/javascript" src="FusionCharts/FusionCharts.jqueryplugin.js"></script>
  </head>
  <body>
    <div id="chartContainer">FusionCharts 将加载显示到这里!</div>
    <script type="text/javascript">
    </script>
  </body>
</html>

在上面的代码中，我们使用了key/value对的形式来配置charts的属性。常见的配置选项有：

属性	描述说明
swfUrl	SWF文件的路径
id	Chart 的id（可选）
width	chart 的宽度 (可选- 默认为 400)
height	chart 的高度 (可选，默认为 300)
dataSource	XML 或 JSON chart 数据源。可以是XML 或 JSON文件的URL,也可以是XML字符串或JSON对象
dataFormat	定义数据源的格式。 a) xmlurl 表示数据源为XML文件的URL b) xml 表示数据源为XML字符串 c) jsonurl 表示数据源为JSON数据文件的URL d) json 表示数据源为JSON字符串或JSON对象
renderer	设置 chart 显示（渲染）引擎，取值可以是 'flash' 或 'javascript'.。默认为flash ，即默认生成 Flash 格式的charts。当设置为 javascript 时，FusionCharts JavaScript 类将显示为纯JavaScript charts.
bgColor	设置chart 的背景色,（可选，默认为#FFFFFF）
scaleMode	chart 显示的比例模式(可选)
lang	设置语言。目前只支持English 。值为"EN"。(可选)
detectFlashVersion	设置为"1" 将自动检查浏览器中是否有Flash Player 8 。 (可选，默认为 "0' )
autoInstallRedirect	是否启用自动安装 Flash Player ，设置为"1"，将自动访问Adobe'网站。(可选，默认为 "0')
debugMode	设置 chart 的调试模式。可选值为 "0" 或 "1". "1", 代表可以调试。 (可选，默认为 "0")

insertFusionCharts方法返回一个所有选中HTML元素组成的jQuery对象数组。

使用JSON作为数据源

JSON格式数据的同样可以作为charts的数据源。你可以使用JSON对象、JSON字符串或JSON字符串的文件URL。使用JSON格式数据时必须指定dataSource属性，并且将dataFormat属性设置为“json”或“jsonurl”。

以下示例将JSON对象作为dataSource：

$("#chartContainer").insertFusionCharts({
        swfUrl: "FusionCharts/Column3D.swf",
        width: "400",
        height: "300",
        id: "myChartId",

        dataFormat: "json",
        dataSource: {
                "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" }
                 ]
                }
});

以下示例将JSON格式字符串作为dataSource：

$("#chartContainer").insertFusionCharts({
        swfUrl: "FusionCharts/Column3D.swf",
        width: "400",
        height: "300",
        id: "myChartId",

        dataFormat: "json",
        dataSource: '{ "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" }  ' +
                        '  ] }'
});

以下示例将包含JSON格式数据的URL作为dataSource：

$("#chartContainer").insertFusionCharts({
        swfUrl: "FusionCharts/Column3D.swf",
        width: "400",
        height: "300",
        id: "myChartId",

        dataFormat: "jsonurl",
        dataSource: "data.json"
});

appendFusionCharts-将charts追加到HTML元素列表的末尾

appendFusionCharts方法将charts插入到指定HTML容器元素的所有子元素列表的末尾。不会替换原来的子元素。示例如下：

$("#chartContainer").appendFusionCharts({
   swfUrl: "FusionCharts/Column3D.swf",
   dataSource: "March.xml",
   dataFormat: "xmlurl",
   width: "400",
   height: "300",
   id: "myChartMarID"
});

appendFusionCharts能使用的参数与insertFusionCharts方法的参数一样。

appendFusionCharts方法返回一个所有选中HTML元素组成的jQuery对象数组。

prependFusionCharts-将charts追加到HTML元素列表的开始

prependFusionCharts方法将charts插入到指定HTML容器元素的所有子元素列表的开始。不会替换原来的子元素。示例如下：

$("#chartContainer").prependFusionCharts({
   swfUrl: "FusionCharts/Column3D.swf",
   dataSource: "January.xml",
   dataFormat: "xmlurl",
   width: "400",
   height: "300",
   id: "myChartJanID"
});