FusionCharts使用教程：LinkedCharts实现无限层级向下钻取-控件新闻-慧都网

FusionCharts使用教程：LinkedCharts实现无限层级向下钻取

原创|使用教程|编辑：龚雪|2014-04-21 09:45:37.000|阅读 2240 次

概述：本文主要介绍如何利用LinkedCharts实现无限层级向下钻取。

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

相关链接：

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@hmdbvip.cn

文章转载自：慧都控件网