图表工具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）。
有关属性的详细列表，请参阅图表属性弦图页面。
一个简单的和弦图如下所示：
上图中有6个节点。链接连接一对存在关系的节点。悬停在节点上会显示与其关联的所有链接（或关系）。同样，将鼠标悬停在链接上会显示相关的节点。自链接节点也可以存在。
和弦图突出的特点
转换前和转换后
和弦图表示过渡数据。过渡数据有两种稳定状态-过渡前和过渡后过渡。
让我们考虑以下情况：两个领先的电信运营商的客户正在从一个切换到另一个，反之亦然。在客户开始切换之前，电信运营商拥有的客户数量是过渡前的状态。切换客户后，电信运营商拥有的客户数量为过渡后状态。节点弧的长度表示与该节点关联的总价值（切换的客户），因此受状态或“模式”的影响。
缺省情况下，FusionCharts会在发布状态下构建和弦图。但是，您也可以构建预状态和弦图。
基于优势链接的颜色
链接从其连接的节点中获取派生颜色。默认情况下，流出值较小的节点为链接赋予颜色。如果两个节点上的值相等，则链接将获得两个节点的渐变颜色。
FusionCharts中的和弦图遵循数据的主导规则。其工作方式如下：
- 在前状态弦图中，流出量最小的节点是链接的主导端。在有关电信运营商的用例中，这适用于失去最少客户的用户。
- 在后期状态和弦图中，流入量最大的节点是链接的主导端。在有关电信运营商的用例中，这适用于获得更多客户的运营商。
如果两个运营商（彼此）失去相同数量的客户，则链接将变得blend阴影。
在和弦图中，links或连接通常称为ribbons。
和弦图的自定义
切换节点链接能见度
单击和弦图中的节点时，该节点将被禁用，并且与其关联的链接也将被隐藏。这可以帮助您专注于在特定上下文中很重要的节点和链接。该行为由图表级别enableToggle属性控制，该属性1默认设置为。您可以根据需要禁用该行为。为此，请将的值设置enableToggle为0。
该minNodeSize属性控制禁用的节点可以占用的最小空间。
使用下面给出的代码：
{
"chart": {
"enableToggle": "0"
}
}
该图表如下图所示：
设置节点间距
您可以在两个相邻节点之间引入空格，以减少图表中的混乱情况。为此，请将所需的空白值分配给attribute nodeSpacing。
使用下面给出的代码：
{
"chart": {
"nodeSpacing": "15"
}
}
该图表如下图所示：
集节点厚度
您可以指定图表中所有节点的单个节点或整个节点的厚度。为此，请将所需值设置为attribute nodeThickness。
使用下面给出的代码：
{
"chart": {
"nodeThickness": "15"
}
}
该图表如下图所示：
设置的图表半径
您可以用百分比值指定图表的半径。为此，请将所需值设置为attribute chordRadius。
使用下面给出的代码：
{
"chart": {
"chordRadius": "100"
}
}
位置节点标签
节点标签的位置可以设置为tangential（默认）outside，或inside。要手动放置节点标签，请将所需位置设置为nodeLabelPosition属性。
使用下面给出的代码：
{
"chart": {
"nodeLabelPosition": "inside"
}
}
隐藏节点标签
您可以选择不显示节点标签，以使图表看起来不太混乱。为此，请将属性的值设置showNodeLabels为0。
使用下面给出的代码：
{
"chart": {
"showNodeLabels": "0"
}
}
该图表如下图所示：
设置启动图表角度
您可以设置起始角度，以指定弦弧应从圆形布局中的何处开始。为此，请设置startingAngle属性为所需的角度。
使用下面给出的代码：
{
"chart": {
"startingAngle": "120"
}
}
该图表如下图所示：
合计设定图表的角度
您可以设置初始渲染时和弦图将覆盖的总角度。为此，请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图如下所示：
