文檔首頁>>Flash圖表控件 FusionCharts 使用教程>>FusionCharts使用教程：LinkedCharts實現(xiàn)無限層級向下鉆取

FusionCharts使用教程：LinkedCharts實現(xiàn)無限層級向下鉆取

FusionCharts XT引入了一個靈活的向下鉆取功能-LinkedCharts，允許你利用單個數(shù)據(jù)源無限層級向下鉆取圖表。所有的鏈接皆來從父表及其數(shù)據(jù)，包含了所有子圖表的數(shù)據(jù)和數(shù)據(jù)連接。單擊父表的數(shù)據(jù)圖項目（柱圖，餅圖等），用戶可以向下鉆取到子圖表。通過drill-up選項，子圖表可以替換父圖表。

以下為LinkedChart功能的實現(xiàn)效果：

如何渲染FusionCharts圖表

根據(jù)如下步驟創(chuàng)建LinkedCharts：

首先，為父圖創(chuàng)建XML/ JSON數(shù)據(jù)。這就是所謂的父數(shù)據(jù)源，包含了數(shù)據(jù)字符串或所有子圖表的data URL。
其次，將子圖表的數(shù)據(jù)字符串或data URL添加至父數(shù)據(jù)源中。如果使用了數(shù)據(jù)字符串方法，每個子圖表的數(shù)據(jù)被嵌入至父數(shù)據(jù)源，并通過獨特的數(shù)據(jù)標(biāo)識符連接。

下列代碼用于渲染銷售圖表：

<html>
<head><script type="text/javascript" src="FusionCharts/FusionCharts.js" ></script></head>
<body>
<div id="chartContainer">FusionCharts XT will load here</div>
<script type="text/javascript"><!--

var myChart = new FusionCharts( "FusionCharts/Column2D.swf", "myChartId", "320", "250", "0" );
myChart.setXMLUrl( "Linked-Data.xml" );
myChart.render( "chartContainer" );

// -->
</script>
</body>
</html>

在上述代碼中，我們渲染了一個帶有Linked-Data.xml 的Column2D圖表，并將其作為圖表數(shù)據(jù)源。接下來，我們來看看如何在父圖表中為LinkedCharts定義數(shù)據(jù)。定義數(shù)據(jù)，需要考慮以下2個方面：

1、選擇是否將子圖表的圖表數(shù)據(jù)嵌入父圖表數(shù)據(jù)源或讓他們作為一個單獨的URL來源。
2、為每個數(shù)據(jù)圖（列，線，面等）定義鏈接屬性，然后指定子圖表的數(shù)據(jù)格式和數(shù)據(jù)源。

接下來一起看一下，如何利用單一數(shù)據(jù)源定義LinkedCharts：

XML

<chart caption="Yearly sales" xAxisName="Year" yAxisName="Sales">
<set label="2004" value="37800" link="newchart-xml-2004-quarterly" />
<set label="2005" value="21900" link="newchart-xml-2005-quarterly" />
<set label="2006" value="32900" link="newchart-xml-2006-quarterly" />
<set label="2007" value="39800" link="newchart-xml-2007-quarterly" />

<linkeddata id="2004-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2004"
xAxisName="Quarter" yAxisName="Sales">
<set label="Q1" value="11700" />
<set label="Q2" value="8600" />
<set label="Q3" value="6900" />
<set label="Q4" value="10600" />
</chart>
</linkeddata>

<linkeddata id="2005-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2005"
xAxisName="Quarter" yAxisName="Sales">
<set label="Q1" value="5500" />
<set label="Q2" value="7100" />
<set label="Q3" value="3900" />
<set label="Q4" value="5400" />
</chart>
</linkeddata>

<linkeddata id="2006-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2006"
xAxisName="Quarter" yAxisName="Sales">
<set label="Q1" value="6700" />
<set label="Q2" value="9200" />
<set label="Q3" value="10800" />
<set label="Q4" value="6200" />
</chart>
</linkeddata>

<linkeddata id="2007-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2007"
xAxisName="Quarter" yAxisName="Sales">
<set label="Q1" value="8900" />
<set label="Q2" value="6600" />
<set label="Q3" value="11200" />
<set label="Q4" value="13100" />
</chart>
</linkeddata>

</chart>

JSON

{
"chart":{ "caption":"Yearly sales", "xaxisname":"Year", "yaxisname":"Sales" },
"data":[{ "label":"2004", "value":"37800", "link":"newchart-json-2004-quarterly" },
{ "label":"2005", "value":"21900", "link":"newchart-json-2005-quarterly" },
{ "label":"2006", "value":"32900", "link":"newchart-json-2006-quarterly" },
{ "label":"2007", "value":"39800", "link":"newchart-json-2007-quarterly" }],
"linkeddata":[{
"id":"2004-quarterly",
"linkedchart":{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"For the year 2004",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[{ "label":"Q1", "value":"11700" },
{ "label":"Q2", "value":"8600" },
{ "label":"Q3", "value":"6900" },
{ "label":"Q4", "value":"10600" }]
}
},
{
"id":"2005-quarterly",
"linkedchart":{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"For the year 2005",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[{ "label":"Q1", "value":"5500" },
{ "label":"Q2", "value":"7100" },
{ "label":"Q3", "value":"3900" },
{ "label":"Q4", "value":"5400" }]
}
},
{
"id":"2006-quarterly",
"linkedchart":{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"For the year 2006",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[{ "label":"Q1", "value":"6700" },
{ "label":"Q2", "value":"9200" },
{ "label":"Q3", "value":"10800" },
{ "label":"Q4", "value":"6200" }]
}
},
{
"id":"2007-quarterly",
"linkedchart":{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"For the year 2007",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[{ "label":"Q1", "value":"8900" },
{ "label":"Q2", "value":"6600" },
{ "label":"Q3", "value":"11200" },
{ "label":"Q4", "value":"13100" }]
}
}
]
}

FusionCharts使用教程：LinkedCharts實現(xiàn)無限層級向下鉆取

用科技創(chuàng)就卓越

Create excellence with technology