JavaScript图表工具FusionCharts入门教程(49)：雷达图-控件新闻-慧都网

JavaScript图表工具FusionCharts入门教程(49)：雷达图

翻译|使用教程|编辑：杨鹏连|2021-04-28 11:22:34.887|阅读 197 次

概述：使用漏斗图绘制简化的数据。在漏斗图中，简化了数据，即漏斗中的每个切片（部分）代表已过滤掉数据的流程。

相关链接：

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最新版

这些图表类型属于FusionWidgets XT。

使用漏斗图绘制简化的数据。例如，您可以将销售数据绘制到漏斗图中以分析销售渠道。从结构上讲，漏斗图由多个段组成，每个段代表一个数据点。您可以使用2D或3D渲染漏斗图。

在漏斗图中，简化了数据，即，漏斗中的每个切片（部分）代表已过滤掉数据的流程。例如，如果您使用漏斗图显示就业过程，则第一部分将代表“申请的候选人数”。此后，每个处理流程（例如“面试阶段1”，“ IQ测试”，“项目”等）将由后续的漏斗切片表示，每个切片都会过滤提供给前一个切片的数据。最后一片具有作为整个过程的最终结果的值（例如，在这种情况下为“招募候选人”）。

突出特点

您可能会发现有用的漏斗图的功能：

单击交互式漏斗切片，以将其与主漏斗分开。
绘制漏斗切片为空心填充。
为每个漏斗切片设置相同的倾斜角（或使其取决于数据）。
将3D漏斗无缝转换为2D漏斗。
选择以2D模式渲染漏斗，以更好地控制边框和填充属性。
将值显示为实际值或百分比。
将值显示为第一个值或上一个值的百分比。
使用智能标签可避免漏斗标签重叠。
将标签放置在漏斗图的侧面或中央。
输入每个渠道切片的自定义工具文本。
将每个渠道切片链接到不同的目标。

漏斗图

创建一个漏斗图
我们将使用下表中提供的数据创建一个漏斗图，显示购买转化分析。它将筛选出数据，以最终显示实际访问了该网站的人数。
要创建漏斗图，请按照以下步骤操作：

在JSON数据中，以"<attributeName>": "<value>"格式设置属性及其对应的值。
使用type属性指定图表类型。要渲染漏斗图，请设置funnel。
使用renderAt属性设置容器对象。
使用width和height属性指定图表的尺寸。
使用dataFormat属性设置要传递给图表对象的数据类型（JSON / XML）。
value在data对象内使用属性显示漏斗切片表示的数据的数值。
使用对象label内的data属性来指定要为渠道切片呈现的标签，例如“唯一网站访问”。

用于显示购买转化分析的简化漏斗图如下所示：

使用FusionCharts Suite XT，您可以为漏斗图配置多个外观和功能属性。

绘制2D漏斗图定制边框

默认情况下，漏斗图呈现为带有上下文菜单的3D图表，您可以使用该菜单在2D和3D显示模式之间切换。但是，您可以将漏斗图配置为在首次加载时以2D模式呈现，而无需使用上下文菜单。您也可以自定义漏斗图的边框属性，以改善视觉效果。
要渲染具有自定义边框属性的2D漏斗图，请使用以下属性：

将该is2D属性的值设置为1，以指定在加载时漏斗图是否将以2D模式呈现。
将showPlotBorder属性的值设置为1，以指定绘图边框是否可见。
将plotBorderColor属性的值设置为将用于绘制绘图边框的颜色的十六进制代码。
设置plotBorderThickness属性的值以指定打印边框的粗细（以像素为单位）。
将plotBorderAlpha属性的值设置在0（透明）和100（不透明）之间，以指定打印边框的透明度。

请参考下面的代码：

{
    "chart": {
        "is2D": "1",
        "showPlotBorder": "1",
        "plotBorderColor": "#333333",
        "plotBorderThickness": "1",
        "plotBorderAlpha": "50"
    }
}

该图表将如下所示：

在图表的中心显示标签

将showLabelsAtCenter属性的值设置为1，以指定是否应在数据图的中心显示数据标签。
JSON代码如下所示：
请参考下面的代码：

{
    "chart": {
        "showLabelsAtCenter": "1"

    }
}

该图表将如下所示：

在图例显示标签

您可以在图例框中显示标签，而不是与数据图一起显示。为此，请显示图例框并隐藏数据图的标签。使用以下属性：

将showLegend属性的值设置为1，以显示图例。
将showLabels属性的值设置为1，以显示数据图的标签。

请参考下面的代码：

{
    "chart": {
        "showLegend": "1",
        "showLabels": "0"
    }
}

该图表将如下所示：

配置图例框的位置

默认情况下，图例框位于漏斗图的底部。但是，您可以更改图例框的位置并将其向右移动。

将legendPosition属性的值设置为RIGHT，以将图例框放在右侧。
请参考下面的代码：

{
    "chart": {
        "legendPosition": "RIGHT"
    },
}

该图表将如下所示：

绘制填充的漏斗切片（在3D模式下）

在3D漏斗图中，切片默认情况下呈空心。但是，您可以将它们渲染为填充状态。将isHollow属性设置为1，以渲染填充的漏斗切片。
请参考下面的代码：

{
    "chart": {
       "isHollow": "1"
    },
}

该图表将如下所示：

画出所有切片用相同的倾斜角度

默认情况下，每当您绘制精简数据时，图表都会使用可变的漏斗切片宽度-倾斜角度-直观地描述过滤过程。但是，您也可以对所有漏斗切片使用相同的倾斜角度。将useSameSlantAngle属性设置为1，以对所有切片使用相同的倾斜角。
请参考下面的代码：

{
    "chart": {
       "useSameSlantAngle": "1"
    },
}

该图表将如下所示：

显示值前值百分比

当以百分比显示每个切片的值时，您可以要求图表计算切片相对于上一个切片（而不是第一个切片）的百分比值。为此，请使用以下给出的属性：

将showPercentValues属性设置为1，以将数据值呈现为百分比值。
将percentOfPrevious属性设置为1，以根据上一个切片确定百分比值。请注意，只有将showPercentValues属性设置为时，此属性才起作用1。

请参考下面的代码：

{
    "chart": {
        "showPercentValues": "1",
        "percentOfPrevious": "1"
    },
}

该图表将如下所示：

片Out个人漏斗切片

有时，您可能希望突出显示重要数据，以便可以轻松地注意到它们。在漏斗图中，您可以切分代表任何此类数据的漏斗切片。将isSliced属性设置1为切片特定的数据切片。请注意，您可以将此属性用作chart对象的一部分（在这种情况下，它将应用于所有切片），也可以将对象用作data对象（在这种情况下，它仅应用于您为其定义的切片）。
请参考下面的代码：

{
    "chart": {
        ...
    },
    "data": [
        ...
        {
            ...
            "isSliced": "1"
        },
    ]
}

该图表将如下所示：

配置悬停效果

使用以下属性来配置悬停效果：

将设置showhovereffect为1，以启用悬停效果。
将plotFillHoverColorattribute的值设置为将鼠标指针悬停在切片上时将填充切片的颜色的十六进制代码。
将plotFillHoverAlpha属性设置为0（透明）到100（不透明）之间的任何值，以在将鼠标指针悬停在切片上时指定切片的透明程度。
将plotBorderHoverColor鼠标指针悬停在其上方时，将attribute的值设置为绘图边框颜色的十六进制代码。
将plotBorderHoverAlpha属性设置为0（透明）和100（不透明）之间的任何值，以在将鼠标指针悬停在切片边框上时指定切片边框的透明度。
将plotBorderHoverThickness鼠标指针悬停在切片边框上时，将该属性的值设置为切片边框的粗细（以像素为单位）。

请参考下面的代码：

{
    "chart": {
        "showPercentValues": "1",
        "showPlotBorder": "1",
        "PlotBorderAlpha": "0",
        "showHoverEffect": "1",
        "plotFillHoverColor": "#cccccc",
        "plotFillHoverAlpha": "60",
        "plotBorderHoverColor": "#333333",
        "plotBorderHoverAlpha": "60",
        "plotBorderHoverThickness": "2"
    },
}

启用了悬停效果的图表如下所示：