无码av,色欲av永久无码精品无码,亚洲a日本一区二区

FusionCharts使用教程：LinkedCharts實現無限層級向下鉆取

原創|使用教程|編輯：龔雪|2014-04-21 09:45:37.000|閱讀 2227 次

概述：本文主要介紹如何利用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" }]
}
}
]
}

標簽：JavaScript HTML5 圖表 FusionCharts

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

文章轉載自：慧都控件網