• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

FusionCharts创建和弦图教程

互联网 diligentman 2周前 (01-14) 13次浏览

FusionCharts Suite XT是全面的跨平台、跨浏览器JavaScript图表套包,其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至简单的HTML页面。它是你值得信赖的JavaScript图表解决方案,目前在全球有45万用户选择Fusioncharts来制作专业的JavaScript图表。

点击下载FusionCharts最新版

和弦图是表示过渡数据中特定实体之间的流关系的图形方式。实体(称为节点)沿圆形布局的圆周绘制。流关系(称为链接)由连接节点的弧表示。链接根据过渡数据的主导规则着色。这是一种视觉上令人愉悦的方式,因此是数据可视化爱好者中的一种流行选择。

和弦图也称为“径向网络图”,“和弦布局”或“依赖轮”。

要创建和弦图,请执行以下步骤:

  • 在JSON数据中,以”<attributeName>”: “<value>”格式设置属性及其对应的值。
  • 使用type属性指定图表类型。要渲染和弦图,请设置chord。
  • 使用renderAt属性设置容器对象。
  • 使用width和height属性指定图表的尺寸。
  • 使用dataFormat属性设置要传递给图表对象的数据类型(JSON / XML)。

有关属性的详细列表,请参阅图表属性弦图页面。

一个简单的和弦图如下所示:

FusionCharts创建和弦图教程

上图中有6个节点。链接连接一对存在关系的节点。悬停在节点上会显示与其关联的所有链接(或关系)。同样,将鼠标悬停在链接上会显示相关的节点。自链接节点也可以存在。

和弦图突出的特点

转换前和转换后

和弦图表示过渡数据。过渡数据有两种稳定状态-过渡前和过渡后过渡。

让我们考虑以下情况:两个领先的电信运营商的客户正在从一个切换到另一个,反之亦然。在客户开始切换之前,电信运营商拥有的客户数量是过渡前的状态。切换客户后,电信运营商拥有的客户数量为过渡后状态。节点弧的长度表示与该节点关联的总价值(切换的客户),因此受状态或“模式”的影响。

缺省情况下,FusionCharts会在发布状态下构建和弦图。但是,您也可以构建预状态和弦图。

基于优势链接的颜色

链接从其连接的节点中获取派生颜色。默认情况下,流出值较小的节点为链接赋予颜色。如果两个节点上的值相等,则链接将获得两个节点的渐变颜色。

FusionCharts中的和弦图遵循数据的主导规则。其工作方式如下:

  • 在前状态弦图中,流出量最小的节点是链接的主导端。在有关电信运营商的用例中,这适用于失去最少客户的用户。
  • 在后期状态和弦图中,流入量最大的节点是链接的主导端。在有关电信运营商的用例中,这适用于获得更多客户的运营商。

如果两个运营商(彼此)失去相同数量的客户,则链接将变得blend阴影。

在和弦图中,links或连接通常称为ribbons。

和弦图的自定义

切换节点链接能见度

单击和弦图中的节点时,该节点将被禁用,并且与其关联的链接也将被隐藏。这可以帮助您专注于在特定上下文中很重要的节点和链接。该行为由图表级别enableToggle属性控制,该属性1默认设置为。您可以根据需要禁用该行为。为此,请将的值设置enableToggle为0。

该minNodeSize属性控制禁用的节点可以占用的最小空间。

使用下面给出的代码:

{
    "chart": {
        "enableToggle": "0"
    }
}

该图表如下图所示:

FusionCharts创建和弦图教程

设置节点间距

您可以在两个相邻节点之间引入空格,以减少图表中的混乱情况。为此,请将所需的空白值分配给attribute nodeSpacing。

使用下面给出的代码:

{
    "chart": {
        "nodeSpacing": "15"
    }
}

该图表如下图所示:

FusionCharts创建和弦图教程

集节点厚度

您可以指定图表中所有节点的单个节点或整个节点的厚度。为此,请将所需值设置为attribute nodeThickness。
使用下面给出的代码:

{
    "chart": {
        "nodeThickness": "15"
    }
}

该图表如下图所示:

FusionCharts创建和弦图教程

设置的图表半径

您可以用百分比值指定图表的半径。为此,请将所需值设置为attribute chordRadius。
使用下面给出的代码:

{
    "chart": {
        "chordRadius": "100"
    }
}

位置节点标签

节点标签的位置可以设置为tangential(默认)outside,或inside。要手动放置节点标签,请将所需位置设置为nodeLabelPosition属性。

使用下面给出的代码:

{
    "chart": {
        "nodeLabelPosition": "inside"
    }
}

隐藏节点标签

您可以选择不显示节点标签,以使图表看起来不太混乱。为此,请将属性的值设置showNodeLabels为0。
使用下面给出的代码:

{
    "chart": {
        "showNodeLabels": "0"
    }
}

该图表如下图所示:

FusionCharts创建和弦图教程

设置启动图表角度

您可以设置起始角度,以指定弦弧应从圆形布局中的何处开始。为此,请设置startingAngle属性为所需的角度。
使用下面给出的代码:

{
    "chart": {
        "startingAngle": "120"
    }
}

该图表如下图所示:

FusionCharts创建和弦图教程

合计设定图表的角度

您可以设置初始渲染时和弦图将覆盖的总角度。为此,请totalAngle在0和之间设置属性的值360。
使用下面给出的代码:

{
    "chart": {
        "totalAngle": "270"
    }
}

添加填充节点和链路之间

您可以在节点及其链接之间引入空格,以使图表看起来更整洁。为此,请将nodeLinkPadding属性的值设置为所需的数量。

使用下面给出的代码:

 

{
    "chart": {
        "nodeLinkPadding": "10"
    }
}

做一个预迁移图

您可以制作一个过渡前和弦图,而不是默认的过渡后和弦图。为此,请将mode属性的值设置为pre。

使用下面给出的代码:

 

{
    "chart": {
        "mode": "pre"
    }
}

修改链接的颜色

默认情况下,“弦图”中的链接继承了连接到它们的主导节点的颜色。但是,如果将linkColorByDominance属性的值设置为0,则链接将继承非主导节点的颜色。

使用下面给出的代码:

{
    "chart": {
        "linkColorByDominance": "0"
    }
}

自定义工具提示

您可以自定义节点和链接的工具提示,以在用户悬停节点或链接时显示更多信息。要做到这一点,你可以使用plotToolText,linkToolText或toolText属性与一些宏一起。

使用 plotToolText

该plotToolText属性在全局级别起作用,它为图表中的所有节点定义了一个工具提示模板。对于价值plotToolText属性是由宏的模板,模板也可以包含纯文本和基本的HTML标签,如br,strong,em,和b。

和弦图表,plotToolText支持以下宏$label,$nodeValue,$nodeDataValue,$plotFillColor,$plotFillAlpha,和$plotIdentifier。有关宏的更多信息,请参见宏列表。

请参考下面的代码:

{
    "chart": {
        "plotToolText": '$label exports $nodeDataValue'
    }
}

使用 linkToolText

该linkToolText属性在全局级别起作用,它为图表中的所有链接定义了一个工具提示模板。对于价值linkToolText属性是由宏的模板,模板也可以包含纯文本和像基本的HTML标签br,strong,em,和b。

和弦图表,linkToolText支持以下宏:$dominantNode,$subservientNode,$dominantFlowValue,$dominantFlowDataValue,$subservientFlowValue,$subservientFlowDataValue,$dominantPlotIdentifier,和$subservientPlotIdentifier。

请参考下面的代码:

{
    "chart": {
        "linkToolText": '$dominantNode exports $dominantFlowDataValue to $subservientNode'
    }
}

使用 toolText

该toolText属性在链接和节点的本地级别起作用,它为图表中的各个链接或节点定义工具提示模板。对于价值toolText属性是由宏的模板,模板也可以包含纯文本和基本的HTML标签,如br,strong,em,和b。

当使用toolText中的节点,它使用下面的宏:$label,$nodeValue,$nodeDataValue,$plotFillColor,$plotFillAlpha。有关宏的更多信息,请参见宏列表。

请参考下面的代码:

{
    "nodes": [{
        "plotToolText": '$label exports $nodeDataValue'
    }]
}

当使用toolText中的链接,它使用下面的宏: $dominantNode,$subservientNode,$dominantFlowValue,$dominantFlowDataValue,$subservientFlowValue,$subservientFlowDataValue,$dominantPlotIdentifier,和$subservientPlotIdentifier。

请参考下面的代码:

{
    "links": [{
         "toolText": '$dominantNode exports $dominantFlowDataValue to $subservientNode'
    }]
}

使用自定义工具提示的Chord图如下所示:

 

FusionCharts创建和弦图教程


想要购买FusionCharts Suite XT正版授权,或了解更多产品信息请点击【咨询在线客服】

FusionCharts创建和弦图教程

 

{{o.name}}


{{m.name}}


喜欢 (0)