文档彩票走势图>>FusionCharts Suite XT入门教程>>JavaScript图表工具FusionCharts入门教程(42)：如何创建和弦图

JavaScript图表工具FusionCharts入门教程(42)：如何创建和弦图

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）。

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

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

上图中有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图如下所示：

想要购买FusionCharts Suite XT正版授权，或了解更多产品信息请点击

彩票走势图

JavaScript图表工具FusionCharts入门教程(42)：如何创建和弦图

用科技创就卓越

Create excellence with technology