`
huang_xiaok
  • 浏览: 95894 次
  • 性别: Icon_minigender_1
  • 来自: 成都
博客专栏
90a30fc4-e2b0-37bf-a450-86cdba0caacc
Fusioncharts中...
浏览量：17107
文章分类
社区版块
存档分类

FusionCharts中文教程：修改图表尺寸和类型

fusionchart图表图表控件数据可视化 
阅读更多

在FusionCharts中既可以通过像素又可以通过百分比（相对于其容器）来指定图表的尺寸。若以像素为单位指定，那么无论在什么尺寸的屏幕或设备上查看图表，图表的尺寸都将保持不变。但是，如果该图表的宽度和高度设定为容器的百分比，在渲染图表时转换为像素，如果容器的尺寸改变了，则图表会自动关联其容器相应的改变尺寸。

< 立即下载FusionCharts最新版本>

在初始化时设置图表宽度和高度像素

指定图表的宽度和高度像素代码如下：

< html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
 FusionCharts.ready(function(){
        var revenueChart = new FusionCharts({
        "type": "column2d",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource": {
        "chart": {
            "caption": "Monthly revenue for last year",
            "subCaption": "Harry's SuperMart",
            "xAxisName": "Month",
            "yAxisName": "Revenues (In USD)",
            "theme": "fint"
         },
        "data": [
            {
               "label": "Jan",
               "value": "420000"
            },
            {
               "label": "Feb",
               "value": "810000"
            },
            {
               "label": "Mar",
               "value": "720000"
            },
            {
               "label": "Apr",
               "value": "550000"
            },
            {
               "label": "May",
               "value": "910000"
            },
            {
               "label": "Jun",
               "value": "510000"
            },
            {
               "label": "Jul",
               "value": "680000"
            },
            {
               "label": "Aug",
               "value": "620000"
            },
            {
               "label": "Sep",
               "value": "610000"
            },
            {
              "label": "Oct",
               "value": "490000"
            },
            {
               "label": "Nov",
               "value": "900000"
            },
            {
               "label": "Dec",
               "value": "730000"
            }
         ]
      }
    });
    revenueChart.render("chartContainer");
  })
</script>
</head>
< body>
    <div id="chartContainer">FusionCharts XT will load here!</div>
< /body>
< /html>

在初始化时设置图表宽度和高度百分比

如果你想创建一个根据其父容器尺寸自动调整的图表，你可以设置图表的宽度和高度的百分比，代码如下：

< html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
 FusionCharts.ready(function(){
        var revenueChart = new FusionCharts({
        "type": "column2d",
        "renderAt": "chartContainer",
        "width": "100%",
        "height": "100%",
        "dataFormat": "json",
        "dataSource":{
        "chart": {
            "caption": "Monthly revenue for last year",
            "subCaption": "Harry's SuperMart",
            "xAxisName": "Month",
            "yAxisName": "Revenues (In USD)",
            "theme": "fint"
         },
        "data": [
            {
               "label": "Jan",
               "value": "420000"
            },
            {
              "label": "Feb",
               "value": "810000"
            },
            {
               "label": "Mar",
               "value": "720000"
            },
            {
               "label": "Apr",
               "value": "550000"
            },
            {
               "label": "May",
               "value": "910000"
            },
            {
               "label": "Jun",
               "value": "510000"
            },
            {
               "label": "Jul",
               "value": "680000"
            },
            {
               "label": "Aug",
               "value": "620000"
            },
            {
               "label": "Sep",
               "value": "610000"
            },
            {
               "label": "Oct",
               "value": "490000"
            },
            {
               "label": "Nov",
               "value": "900000"
            },
            {
               "label": "Dec",
               "value": "730000"
            }
         ]
      }
    });
    revenueChart.render("chartContainer");
  })
</script>
</head>
< body>
<div id="parentContainer">
    <div id="chartContainer">FusionCharts XT will load here!</div>
</div>
< /body>
< /html>

你只需确保将图表的父容器设置为根据浏览器尺寸改变或页面上的其它改变（如元件被添加或删除等）动态改变自身的尺寸。
每当容器元素调整尺寸，图表也会立即调整自身的尺寸。
在某些情况下，如果HTML容器元素本身并没有获得适当的宽度或高度（由于浏览器渲染错误），图表看起来像被挤压，或出现在了不该出现的位置。如果发生这种情况，那么你就必须指定图表的尺寸像素。

通过resizeTo()方法修改图表的宽度和高度

如果你已经初始化了一个图表，你还可以在客户端通过调用resizeTo（）方法动态修改其尺寸。
JSON:

{
    "chart": {
        "caption": "Monthly revenue for last year",
        "subCaption": "Harry's SuperMart",
        "xAxisName": "Month",
        "yAxisName": "Revenues (In USD)",
        "numberPrefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ]
}

XML:

<chart caption="Monthly revenue for last year" subcaption="Harry&#39;s SuperMart" xaxisname="Month" yaxisname="Revenues (In USD)" numberprefix="$" theme="fint">
    < set label="Jan" value="420000" />
    < set label="Feb" value="810000" />
    < set label="Mar" value="720000" />
    < set label="Apr" value="550000" />
    < set label="May" value="910000" />
    < set label="Jun" value="510000" />
    < set label="Jul" value="680000" />
    < set label="Aug" value="620000" />
    < set label="Sep" value="610000" />
    < set label="Oct" value="490000" />
    < set label="Nov" value="900000" />
    < set label="Dec" value="730000" />
</chart>

如下图所示，在Width和Height输入框中输入新的图表尺寸，点击Resize按钮，就能动态修改图表的尺寸了。

change width height

使用chartType()方法动态修改图表类型

在月收入图表中，若你希望通过按一下按钮就将柱形图转换成折线图，标准的做法是创建一个折线图实例，传递相同的JSON数据，然后渲染它。
而FusionCharts通过chartType()方法使你轻松实现图表类型的更改。这种方法可以让你从一个图表类型转换为另一种图表类型（只要它们数据类型相同，例如：单系列）。
如下所示，点击图表下面的图表类型，就能传染出相应的图表了：

chart type bar
chart type column
chart type line

代码如下：

< html>
<head>
<script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<script>
FusionCharts.ready(function () {
    var radio = [],
        radElem,
        val,
        revenueChart = new FusionCharts({
        "type": "column2d",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource": {
                "chart": {
                    "caption": "Monthly revenue",
                    "subCaption": "Last year",
                    "xAxisName": "Month",
                    "yAxisName": "Revenue (In USD)",
                    "numberPrefix": "$",
                    "theme": "fint"
                },
                "data": [
                    {
                        "label": "Jan",
                        "value": "420000"
                    },
                    {
                        "label": "Feb",
                        "value": "810000"
                    },
                    {
                        "label": "Mar",
                        "value": "720000"
                    },
                    {
                        "label": "Apr",
                        "value": "550000"
                    },
                    {
                        "label": "May",
                        "value": "910000"
                    },
                    {
                        "label": "Jun",
                        "value": "510000"
                    },
                    {
                        "label": "Jul",
                        "value": "680000"
                    },
                    {
                        "label": "Aug",
                        "value": "620000"
                    },
                    {
                        "label": "Sep",
                        "value": "610000"
                    },
                    {
                        "label": "Oct",
                        "value": "490000"
                    },
                    {
                        "label": "Nov",
                        "value": "900000"
                    },
                    {
                        "label": "Dec",
                        "value": "730000"
                    }
                ]
            }
        });
    revenueChart.render();
    radio = document.getElementsByTagName('input');
    for (i = 0; i < radio.length; i++) {
        radElem = radio[i];
        if (radElem.type === 'radio') {
            radElem.onclick = function(){
                val = this.getAttribute('value');
                val && revenueChart.chartType(val);
            };
        }
    }
});
</script>
</head>
< body>
<div id="chartContainer">FusionCharts will render here</div>
<div id='controllers'>
    <label><input name='chart-type' id='line' type='radio' value='line' /> Line chart</label>
    <label><input name='chart-type' id='bar' type='radio' value='bar2d' /> Bar chart</label>
    <label><input name='chart-type' id='column' type='radio' value='column2d' checked='true' /> Column chart</label>
</div>
< /body>
< /html>

你还可以提供一个新的数据源和格式作为chartType(chartType, options)方法的第二个可选参数，用来根据图表修改其数据。

2
顶
1
踩
分享到：
| FastReport Online Designer中文教程：数据 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    利用FusionCharts 实现数据图表展示

    - **响应式设计**：确保图表在不同屏幕尺寸和设备上都能正确显示，可能需要调整图表大小和布局。 - **图表交互**：利用FusionCharts的事件处理机制，增加图表的互动性，如点击图表区域查看详细信息。 - **性能优化...

    FusionCharts参数及功能特性详解实例

    FusionCharts 是一款功能强大且灵活的图表工具，可以帮助开发者快速创建各种类型的图表，如折线图、柱状图、饼图等。通过设置不同的参数，可以实现图表的高度自定义，满足不同的需求。本文将详细介绍 FusionCharts ...

    fusionCharts是如何在网页呈现图表

    在实际应用中，开发者首先需要在HTML页面中引入FusionCharts的JavaScript库和图表SWF文件，然后创建一个JavaScript对象实例化图表，指定图表类型、宽度、高度以及数据源。接着，通过调用图表对象的方法来配置图表的...

    FusionCharts 非常绚的flash图表

    2. **丰富的图表类型**：FusionCharts提供了大量不同类型的图表，如线图、柱状图、饼图、雷达图、热力图等，满足了用户在数据分析和展示时的多样化需求。 3. **交互性**：这些图表不仅外观精美，还具有高度的交互性...

    FusionCharts图表控件中文版使用手册.doc

    《FusionCharts图表控件中文版使用手册》是针对初学者设计的一份详细教程，旨在帮助用户快速掌握这款强大的图表工具。FusionCharts是一款流行的JavaScript图表库，它能够以丰富的互动性和美观的视觉效果呈现数据。 ...

    FusionCharts教程

    FusionCharts自动适应各种屏幕尺寸，包括手机和平板设备。对于移动优化，可以利用触控事件和响应式设计，确保在不同设备上的良好用户体验。 ### 9. 实战案例 在实际项目中，FusionCharts常用于报表系统、数据分析...

    FusionCharts图表制作插件

    6. **响应式设计**：在移动设备普及的今天，FusionCharts具有良好的响应式布局，能够在不同的屏幕尺寸上自动调整图表大小，确保在任何设备上都能呈现出最佳视觉效果。 7. **API和工具**：FusionCharts提供了一系列...

    fusioncharts中文教程

    这个中文教程是为那些想要学习如何使用FusionCharts来创建动态、交互式图表的人准备的。以下是对FusionCharts及其相关知识点的详细说明： 1. **FusionCharts介绍**： FusionCharts是一款基于JavaScript和Flash的...

    Fusioncharts导出图片所需jar包

    在IT行业中，FusionCharts是一款广泛使用的交互式图表库，它能够帮助开发者创建美观且功能丰富的数据可视化应用。本文将详细讲解如何利用FusionCharts提供的`fcexporter.jar`和`fcexporthandler.jar`这两个关键的...

    fusioncharts

    FusionCharts 是一款强大的数据可视化工具，专为网页和应用程序设计，用于创建交互式图表和图形。它提供了一系列丰富的图表类型，如柱状图、线图、饼图、地图等，使数据呈现更加生动、易理解。FusionCharts XT (v...

    FusionCharts图表控件中文版使用手册定义.pdf

    《FusionCharts图表控件中文版使用手册定义》是一份详细介绍如何使用FusionCharts图表控件的网络文档。FusionCharts是一款强大的图表生成工具，它能够帮助开发者创建丰富的交互式图表，广泛应用于数据分析和可视化...

    用fusioncharts使用json格式数据展示图表

    3. **创建图表对象**：在JavaScript代码中，实例化FusionCharts对象，传入图表类型和JSON数据。 ```javascript var chartObj = new FusionCharts({ type: 'column2d', renderAt: 'chart-container', width: '600...

    Fusioncharts31教程整理.pdf

    FusionCharts支持多种图表样式和类型，如3D效果、多种色彩方案，以及各种图表类型，满足不同场景的需求。 6. FusionCharts 的高级特性： 除了基本的图表展示，FusionCharts还具有丰富的高级特性，如工具提示、...

    FusionCharts图表组件简单使用

    此外，不同类型的图表可能需要不同的数据源格式，因此在实际应用中，建议参考FusionCharts提供的文档和示例来适应具体需求。 总的来说，FusionCharts是一个强大且易于使用的图表组件，适用于快速构建具有吸引力的...

    fusioncharts图表

    FusionCharts支持多种图表类型，包括柱状图、线图、饼图、散点图、热力图等，满足各种数据分析和展示需求。这些图表不仅具有良好的视觉效果，还支持自定义颜色、字体、图例、数据标签等样式，让开发者能够根据项目...

    Fusioncharts XT V3.2.2最新中文版教程

    ### Fusioncharts XT V3.2.2 最新中文版教程 #### 一、Fusioncharts V3.2.2 产品简介 Fusioncharts V3.2.2 是一款先进的图表制作工具，专为现代网站和企业应用程序设计，旨在帮助用户创建交互性强、视觉效果出众的...

    fusioncharts生成图表后导出图片

    FusionCharts是一款强大的数据可视化工具，它提供了丰富的图表类型和高度自定义的选项，使得开发者可以轻松地在网页中展示复杂的数据。 在博文链接中（由于无法直接访问该链接，以下内容基于FusionCharts常见功能...

    FusionCharts图表控件中文版使用手册

    总的来说，FusionCharts中文版使用手册是一份详尽的参考资料，涵盖了从基础到高级的各种特性，无论你是初学者还是经验丰富的开发者，都能从中找到你需要的信息，以创建出专业且美观的图表。通过熟练掌握手册中的知识...

    js实现图表-FusionCharts

    4. **响应式设计**：FusionCharts图表支持各种设备和屏幕尺寸，自动适应手机、平板和桌面环境，提供一致的查看体验。 5. **多语言支持**：内置多种语言，方便全球用户使用。 **四、FusionCharts在报表中的应用** 1....

Magicbox
Global site tag (gtag.js) - Google Analytics