JavaScript图表工具FusionCharts入门教程(50)：金字塔图-控件新闻-慧都网

JavaScript图表工具FusionCharts入门教程(50)：金字塔图

翻译|使用教程|编辑：杨鹏连|2021-06-04 16:54:53.503|阅读 221 次

概述：使用金字塔图来比较数据，例如产品一年的销售数据。金字塔图由多个段组成，每个段代表一个数据点。金字塔线段相对于整个金字塔的高度，表示特定数据点的值。

相关链接：

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

使用金字塔图来比较数据，例如产品一年的销售数据。金字塔图由多个段组成，每个段代表一个数据点。金字塔线段相对于整个金字塔的高度，表示特定数据点的值。

如您所知，金字塔图中的每个线段代表一个数据集，线段的高度代表该数据集的值。为了将段彼此区分开来，您可以为它们的背景、边界等单独配置它们。在金字塔段附近，可以显示该金字塔的标签和值。

金字塔图

显着特征

单击交互式金字塔切片将它们与主金字塔分开。
右键单击图表并选择查看 2D 以将 3D 金字塔无缝转换为 2D 金字塔。
以 2D 模式渲染金字塔，更好地控制边框和填充属性。
将值显示为实际值或百分比。
使用智能标签避免金字塔标签重叠。
在图表的侧面或中心放置标签。
为每个金字塔切片使用自定义工具文本。
如果您愿意，可以将每个金字塔切片链接到有效的目标，例如网页、Javascript 函数，甚至是深入图表。

创建一个简单的金字塔图

使用下面给出的数据构建全球财富金字塔（瑞士信贷 2013 年）图表，以了解当年世界财富的分布情况：

要创建金字塔图，请按照以下步骤操作：

在 JSON 数据中，按"<attributeName>": "<value>"格式设置属性及其对应的值。
使用type属性指定图表类型。要渲染金字塔图，请设置pyramid。
使用renderAt属性设置容器对象。
使用width和height属性指定图表的维度。
使用dataFormat属性设置要传递给图表对象的数据类型 (JSON/XML) 。
设置对象value内的data属性以显示数据的数值。
设置label属性以指定金字塔线段的标签。

使用上述代码得到的全球财富金字塔图如下所示：

您可以为金字塔图配置多个功能和外观属性。

绘制二维金字塔并自定义边框属性

默认情况下，金字塔图表呈现为带有上下文菜单的 3D 图表，您可以使用该菜单在 2D 和 3D 显示模式之间切换。但是，您可以将金字塔图表配置为在首次加载时以 2D 模式呈现，而无需使用上下文菜单。您还可以自定义金字塔图的边框属性以获得更好的视觉表示。

使用以下属性来渲染具有自定义边框属性的 2D 金字塔图：

将is2D属性设置为1以 2D 呈现图表。
将showPlotBorder属性设置为1, 以显示绘图边框。
将plotBorderColor属性值设置为绘图边框颜色的十六进制代码。
设置plotBorderThickness属性值以指定绘图边框的粗细（以像素为单位）。
设置(transparent) 和(opaque)plotBorderAlpha之间的属性值以指定绘图边框的透明度。

参考下面给出的代码：

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

图表将如下所示：

在图表中心显示标签

将showLabelsAtCenter属性值设置为“1”，以在图表中心显示标签。
参考下面给出的代码：

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

图表将如下所示：

在图表的图例中显示标签

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

将showLegend属性的值设置为1，以指定是否为图表显示图例框。
将showLabels属性值设置为1, 以指定是否显示标签。

参考下面给出的代码：

{
  "chart": {
    "showlegend": "1",
    "showlabels": "0"
  }
}

图表将如下所示：

配置图例框的位置

默认情况下，图例框位于金字塔图的底部。但是，您可以将其位置向右移动。为此，请将legendPosition属性值设置为RIGHT。
参考下面给出的代码：

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

图表将如下所示：

将数据值显示为百分比

您可以配置金字塔图以显示百分比值而不是数值。为此，请将showPercentValues属性值设置为1。
参考下面给出的代码：

{
  "chart": {
    "showPercentValues": "1"
  }
}

图表将如下所示：

切出单个金字塔切片

您可以使金字塔图的所有切片或单个切片显示为切片。为此，请将isSliced属性值设置为1。将其用作chart对象的一部分，使整个图表看起来被切掉，或将其用作data对象的一部分，使一个或多个线段看起来被切掉。

参考下面给出的代码：

{
  "chart": {
    "isSliced": "1"
  }
}

图表将如下所示：

配置悬停效果

使用下面给出的属性，在图表中配置悬停效果：

将该showhovereffect属性的值设置为1, 以启用悬停效果。
将hoverColor属性值设置为将鼠标指针悬停在切片上时将用于填充切片的颜色的十六进制代码。
将hoverAlpha属性值设置在0(transparent) 和100(opaque) 之间以指定将鼠标指针悬停在切片上时切片的透明度。
将borderHoverColor属性值设置为将鼠标指针悬停在其上时将使用的颜色的十六进制代码。
将borderHoverAlpha属性值设置在0(transparent) 和100(opaque) 之间以指定将鼠标指针悬停在边框上时边框的透明度。
设置borderHoverThickness属性值以指定将鼠标指针悬停在切片边框上时切片边框的厚度（以像素为单位）。

参考下面给出的代码：

{
  "chart": {
    "showHoverEffect": "1",
    "hoverColor": "#cccccc",
    "hoverAlpha": "75",
    "borderHoverColor": "#aa0000",
    "borderHoverAlpha": "100",
    "borderHoverThickness": "3"
  }
}