天天干天天拍,麻豆电影,欧美日本免费

老司机夜插-理伦理片-理伦片免费-理伦片免费观看-理伦片免费看-理伦日韩-理论福利片-理论片第一页-理论片电影-理论片理论

FusionCharts使用教程：自定義圖表——修改圖表尺寸和類型

原創(chuàng)|使用教程|編輯：鄭恭琳|2015-11-26 10:10:12.000|閱讀 5781 次

概述：本篇教程主要教大家如何修改圖表的尺寸來更好地適應頁面的大小，以及如何修改圖表類型。

相關(guān)鏈接：

在FusionCharts中既可以通過像素又可以通過百分比（相對于其容器）來指定圖表的尺寸。若以像素為單位指定，那么無論在什么尺寸的屏幕或設(shè)備上查看圖表，圖表的尺寸都將保持不變。但是，如果該圖表的寬度和高度設(shè)定為容器的百分比，在渲染圖表時轉(zhuǎn)換為像素，如果容器的尺寸改變了，則圖表會自動關(guān)聯(lián)其容器相應的改變尺寸。

< 立即下載FusionCharts最新版本>

在初始化時設(shè)置圖表寬度和高度像素

指定圖表的寬度和高度像素代碼如下：

< 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>

在初始化時設(shè)置圖表寬度和高度百分比

如果你想創(chuàng)建一個根據(jù)其父容器尺寸自動調(diào)整的圖表，你可以設(shè)置圖表的寬度和高度的百分比，代碼如下：

< 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>

你只需確保將圖表的父容器設(shè)置為根據(jù)瀏覽器尺寸改變或頁面上的其它改變（如元件被添加或刪除等）動態(tài)改變自身的尺寸。
每當容器元素調(diào)整尺寸，圖表也會立即調(diào)整自身的尺寸。
在某些情況下，如果HTML容器元素本身并沒有獲得適當?shù)膶?度或高度（由于瀏覽器渲染錯誤），圖表看起來像被擠壓，或出現(xiàn)在了不該出現(xiàn)的位置。如果發(fā)生這種情況，那么你就必須指定圖表的尺寸像素。

通過resizeTo()方法修改圖表的寬度和高度

如果你已經(jīng)初始化了一個圖表，你還可以在客戶端通過調(diào)用resizeTo（）方法動態(tài)修改其尺寸。
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按鈕，就能動態(tài)修改圖表的尺寸了。

使用chartType()方法動態(tài)修改圖表類型

在月收入圖表中，若你希望通過按一下按鈕就將柱形圖轉(zhuǎn)換成折線圖，標準的做法是創(chuàng)建一個折線圖實例，傳遞相同的JSON數(shù)據(jù)，然后渲染它。
而FusionCharts通過chartType()方法使你輕松實現(xiàn)圖表類型的更改。這種方法可以讓你從一個圖表類型轉(zhuǎn)換為另一種圖表類型（只要它們數(shù)據(jù)類型相同，例如：單系列）。
如下所示，點擊圖表下面的圖表類型，就能傳染出相應的圖表了：

代碼如下：

< 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>

你還可以提供一個新的數(shù)據(jù)源和格式作為chartType(chartType, options)方法的第二個可選參數(shù)，用來根據(jù)圖表修改其數(shù)據(jù)。

購買最新正版授權(quán)！""

慧都年終盛典火爆開啟，一年僅一次的最強促銷，破冰鉅惠不容錯過！！優(yōu)惠詳情點擊查看>>

標簽：JavaScript 圖表圖表庫數(shù)據(jù)可視化數(shù)據(jù)分析圖表解決方案圖表控件 FusionCharts圖表

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

上一篇：Qt使用教程：指定運行設(shè)置（三）下一篇：jQuery EasyUI使用教程：將一個HTML表格轉(zhuǎn)換為數(shù)據(jù)網(wǎng)格