文檔金喜正規買球>>Flash圖表控件 FusionCharts 使用教程>>FusionCharts使用教程：LinkedCharts實現無限層級向下鉆取
FusionCharts使用教程：LinkedCharts實現無限層級向下鉆取
FusionCharts XT引入了一個靈活的向下鉆取功能-LinkedCharts，允許你利用單個數據源無限層級向下鉆取圖表。所有的鏈接皆來從父表及其數據，包含了所有子圖表的數據和數據連接。單擊父表的數據圖項目（柱圖，餅圖等），用戶可以向下鉆取到子圖表。通過drill-up選項，子圖表可以替換父圖表。
以下為LinkedChart功能的實現效果：
如何渲染FusionCharts圖表
根據如下步驟創建LinkedCharts：
- 首先，為父圖創建XML/ JSON數據。這就是所謂的父數據源，包含了數據字符串或所有子圖表的data URL。
- 其次，將子圖表的數據字符串或data URL添加至父數據源中。如果使用了數據字符串方法，每個子圖表的數據被嵌入至父數據源，并通過獨特的數據標識符連接。
下列代碼用于渲染銷售圖表：
<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圖表，并將其作為圖表數據源。接下來，我們來看看如何在父圖表中為LinkedCharts定義數據。定義數據，需要考慮以下2個方面：
1、選擇是否將子圖表的圖表數據嵌入父圖表數據源或讓他們作為一個單獨的URL來源。
2、為每個數據圖（列，線，面等）定義鏈接屬性，然后指定子圖表的數據格式和數據源。
接下來一起看一下，如何利用單一數據源定義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" }]
}
}
]
}
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線