FusionCharts 技术文档-drilldown map

最新推荐文章于 2021-03-07 03:48:26 发布

weixin_30558305

最新推荐文章于 2021-03-07 03:48:26 发布

阅读量157

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/leecheeme/archive/2013/04/27/3046322.html

版权

创建向下钻取图表和LinkedCharts

增加向下钻取图表链接

FusionChartsXT组的所有图表（除变焦线图）都支持下钻功能。这意味着，您可以将单个数据图（列在柱图，馅饼片饼图等）或整个图表转换成热点（或链接）。这些东西，点击后可以打开网址，调用JavaScript函数或加载LinkedCharts的。

从广义上讲，向下钻取的功能可以被分为两种类型：

1。简单链接：向下钻取打开简单的URL或调用JavaScript函数（同一页上）
2. Chart链接（LinkedCharts）：向下钻取详细LinkedCharts，
使用FusionCharts XT的，你可以创造无限向下钻取水平。一直保持非常通用的，以容纳所有类型的要求。

使用FusionCharts XT的，你可以创造无限水平向下钻取。一直保持非常通用的，以容纳所有类型的要求。

Using Simple Links

使用简单的链接，你可以提供链接的页面的一个网址（或JavaScript函数）为每个数据项在图表（列，行锚，锚区饼切片等）。简单的链接可以有各种不同的格式：

Simple links that open URL in the same page

Defining links for a Chart

To define a simple link for any dataplot, just define the link attribute for the <set> element as under:
<set ... value='2235' ... link='ShowDetails.asp%3FMonth%3DJan' ...>

XML Example:

Simple links that open URL in a new browser window

add n- before any link.

For example,

Example XML:

Links that open URL in a specified frame/iframe

要做到这一点，你只要指定链接本身的框架的的名称。当创建模拟的明细报表和仪表板时，此功能是非常有用的。

To open link in a specified frame, you need to set the link as under:

提前注意：您可以提供_parent作为框架的名称。这个URL将会在这个框架或浏览器窗口中加载，他是当前窗口的父窗口。通常情况下，主要的浏览器空间变得父框架，它包含所有的帧。因此，如果你想删除所有帧和加载新鲜的URL相同的位置上，你可以使用_parent框架的名称。

XML Example:

l Links that open URL in a new pop-up window（在弹出窗口中打开链接）

To open a link in pop-up window, you need to define the link as under:

Sample XML:

Links that invoke JavaScript functions (present either in FusionCharts JavaScript class or on the same web page)

也就是说，当观众在图表上点击一个数据元素时，你可以在同一个页面调用一个JavaScript函数结束。

FusionCharts XT provides two ways of setting JavaScript functions as links:

j- prefix

For example,

<set label='USA' value='235' link="j-myJS-USA,235"/>

2.JavaScript: prefix

For example,

<set label='USA' value='235' link="JavaScript: isJavaScriptCall=true; alert('hi JS!'); myJS('USA',235);"/>

Set the whole chart as a hot-spot and apply any of the above simple-link features

(设置整个图表作为一个热点，并适用于任何上述简单的链接功能)

从FusionCharts XT，你还可以设置全图作为一个单一的热点。这是非常有用的，当你想图表显示一个小的缩略图，点击它时打开一个详细的大图

To set the entire chart as a hotspot, just specify the target link in clickURL attribute of <chart> element as under:

您可以再次指定五种方式中的链接：

1。简单链接在同一窗口中打开
2。简单链接在新窗口打开
3.连接到另一框架
4 在新的弹出窗口4.Link开幕
5.Existing JavaScript函数被调用（在同一页上）的链接
如果设置整个图表作为热点，在图表上的其他环节（个别环节的数据图）将无法正常工作

Example XML:

窗体顶端

注：内部图表解码设置为链接的URL。在调用链接再次编码的URL。如果通过URL传递多语言字符或不想由图解码编码机制来处理，你可以设置unescapeLinks= '0'在<chart>图表的XML数据元素。如果您使用的JSON数据，你需要使用{ "chart" : { "unescapeLinks" : "0" ... } ... } .

Creating simple links using XML

You can convert a data plot into a link simply by introducing the link attribute into the <set> element. Here is an example:

<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>

  <set label='Jan' value='17400'link='DemoLinkPages/DemoLink1.html'/> <!-- Simple Link -->

  <set label='Feb' value='19800' link='n-DemoLinkPages/DemoLink2.html'/> <!-- Link in new window -->

  <set label='Mar' value='21800' link='F-detailsFrame-DemoLinkPages/DemoLink3.htm'/> <!-- Link in a frame -->

  <set label='Apr' value='23800' link='P-detailsPopUp,width=400,height=300,toolbar=no, 

    scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html'/> <!-- Link in a pop-up -->

  <set label='May' value='29600' link='j-myJavaScriptFunction-parameters'/> <!-- JavaScript function as link -->

</chart>

Creating links using JSON

Similarly, if you are using JSON data instead of XML, you must add the link property to the data object in the following way:

{
"chart":{
"caption":"Monthly Sales Summary",
"subcaption":"For the year 2006",
"xaxisname":"Month",
"yaxisname":"Sales",
"numberprefix":"$"
},
"data":[
{ "label":"Jan", "value":"17400", "link":"DemoLinkPages/DemoLink1.html" },
{ "label":"Feb", "value":"19800", "link":"n-DemoLinkPages/DemoLink2.html" },
{ "label":"Mar", "value":"21800", "link":"F-detailsFrame-DemoLinkPages/DemoLink3.htm" },
{ "label":"Apr", "value":"23800", "link":"P-detailsPopUp,width=400,height=300,toolbar=no," +
"scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html" },
{ "label":"May", "value":"29600", "link":"j-myJavaScriptFunction-parameters" }
]

Using LinkedCharts

这是一个简单的方法，建设向下钻取图表，详细的图表可以替换父图表或打开一个单独的对话框。该功能还允许向下钻取图表从一个单一的数据源的配置。的过程中已经详细解释了在翻页。

FusionCharts XT的引入了一个新的智能向下钻取的功能 - LinkedCharts - 允许你创造无限级别的向下钻取图表，用一个单一的数据源。所有链接来自父图表和数据，全面包含数据或URL的所有后续数据（孩子，大的孩子）图表。当点击父图的数据图（柱图，饼图等），用户可以向下钻取到后代图表。后裔图表（或孩子图表）可以替换父图与选项钻取，可以打开新的对话框或框架。

How to render?（如何呈现）

要创建LinkedCharts，你需要按照下列步骤操作：

首先，为父辈图表创建XML/ JSON数据。这就是所谓的父数据源，并全面包含数据的String或数据URL的所有后续图表。
接下来，在父数据源内为所有的后代图表添加数据字符串或数据URL。如果数据串的方法使用，每个后代图表的数据被嵌入在父数据源和链接采用独特的数据标识符。
你已经完成了。是的，没有任何额外的代码是必须的！

详细请看：http://docs.fusioncharts.com/charts/

转载于:https://www.cnblogs.com/leecheeme/archive/2013/04/27/3046322.html

weixin_30558305

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
FusionCharts 技术文档-drilldown map

创建向下钻取图表和LinkedCharts增加向下钻取图表链接FusionChartsXT组的所有图表（除变焦线图）都支持下钻功能。这意味着，您可以将单个数据图（列在柱图，馅饼片饼图等）或整个图表转换成热点（或链接）。这些东西，点击后可以打开网址，调用JavaScript函数或加载LinkedCharts的。从广义上讲，向下钻取的功能可以被分为两种类型：1。简单链接：向下钻...
复制链接

扫一扫