图表工具FusionCharts如何创建和弦图?
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图表。【慧都网免费下载】
和弦图是表示过渡数据中特定实体之间的流关系的图形方式。实体(称为节点)沿圆形布局的圆周绘制。流关系(称为链接)由连接节点的弧表示。链接根据过渡数据的主导规则着色。这是一种视觉上令人愉悦的方式,因此是数据可视化爱好者中的一种流行选择。
和弦图也称为“径向网络图”,“和弦布局”或“依赖轮”。
要创建和弦图,请执行以下步骤:
- 在JSON数据中,以"<attributeName>": "<value>"格式设置属性及其对应的值。
- 使用type属性指定图表类型。要渲染和弦图,请设置chord。
- 使用renderAt属性设置容器对象。
- 使用width和height属性指定图表的尺寸。
- 使用dataFormat属性设置要传递给图表对象的数据类型(JSON / XML)。
有关属性的详细列表,请参阅图表属性弦图页面。
一个简单的和弦图如下所示:
![](https://image.evget.com/attachment/keditor/image/20210113/20210113092348_20496.png)
上图中有6个节点。链接连接一对存在关系的节点。悬停在节点上会显示与其关联的所有链接(或关系)。同样,将鼠标悬停在链接上会显示相关的节点。自链接节点也可以存在。
和弦图突出的特点
转换前和转换后
和弦图表示过渡数据。过渡数据有两种稳定状态-过渡前和过渡后过渡。
让我们考虑以下情况:两个领先的电信运营商的客户正在从一个切换到另一个,反之亦然。在客户开始切换之前,电信运营商拥有的客户数量是过渡前的状态。切换客户后,电信运营商拥有的客户数量为过渡后状态。节点弧的长度表示与该节点关联的总价值(切换的客户),因此受状态或“模式”的影响。
缺省情况下,FusionCharts会在发布状态下构建和弦图。但是,您也可以构建预状态和弦图。
基于优势链接的颜色
链接从其连接的节点中获取派生颜色。默认情况下,流出值较小的节点为链接赋予颜色。如果两个节点上的值相等,则链接将获得两个节点的渐变颜色。
FusionCharts中的和弦图遵循数据的主导规则。其工作方式如下:
- 在前状态弦图中,流出量最小的节点是链接的主导端。在有关电信运营商的用例中,这适用于失去最少客户的用户。
- 在后期状态和弦图中,流入量最大的节点是链接的主导端。在有关电信运营商的用例中,这适用于获得更多客户的运营商。
如果两个运营商(彼此)失去相同数量的客户,则链接将变得blend阴影。
在和弦图中,links或连接通常称为ribbons。
和弦图的自定义
切换节点链接能见度
单击和弦图中的节点时,该节点将被禁用,并且与其关联的链接也将被隐藏。这可以帮助您专注于在特定上下文中很重要的节点和链接。该行为由图表级别enableToggle属性控制,该属性1默认设置为。您可以根据需要禁用该行为。为此,请将的值设置enableToggle为0。
该minNodeSize属性控制禁用的节点可以占用的最小空间。
使用下面给出的代码:
{ "chart": { "enableToggle": "0" } }
该图表如下图所示:
![](https://image.evget.com/attachment/keditor/image/20210113/20210113092712_14957.png)
设置节点间距
您可以在两个相邻节点之间引入空格,以减少图表中的混乱情况。为此,请将所需的空白值分配给attribute nodeSpacing。
使用下面给出的代码:
{ "chart": { "nodeSpacing": "15" } }
该图表如下图所示:
![](https://image.evget.com/attachment/keditor/image/20210113/20210113092836_52225.png)
集节点厚度
您可以指定图表中所有节点的单个节点或整个节点的厚度。为此,请将所需值设置为attribute nodeThickness。
使用下面给出的代码:
{ "chart": { "nodeThickness": "15" } }
该图表如下图所示:
![](https://image.evget.com/attachment/keditor/image/20210113/20210113093023_62462.png)
设置的图表半径
您可以用百分比值指定图表的半径。为此,请将所需值设置为attribute chordRadius。
使用下面给出的代码:
{ "chart": { "chordRadius": "100" } }
位置节点标签
节点标签的位置可以设置为tangential(默认)outside,或inside。要手动放置节点标签,请将所需位置设置为nodeLabelPosition属性。
使用下面给出的代码:
{ "chart": { "nodeLabelPosition": "inside" } }
隐藏节点标签
您可以选择不显示节点标签,以使图表看起来不太混乱。为此,请将属性的值设置showNodeLabels为0。
使用下面给出的代码:
{ "chart": { "showNodeLabels": "0" } }
该图表如下图所示:
![](https://image.evget.com/attachment/keditor/image/20210113/20210113093348_13208.png)
设置启动图表角度
您可以设置起始角度,以指定弦弧应从圆形布局中的何处开始。为此,请设置startingAngle属性为所需的角度。
使用下面给出的代码:
{ "chart": { "startingAngle": "120" } }
该图表如下图所示:
![](https://image.evget.com/attachment/keditor/image/20210113/20210113093505_94668.png)
合计设定图表的角度
您可以设置初始渲染时和弦图将覆盖的总角度。为此,请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图如下所示: