共计 2446 个字符,预计需要花费 7 分钟才能阅读完成。
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 图表。
应用金字塔图来比拟数据,例如产品一年的销售数据。金字塔图由多个段组成,每个段代表一个数据点。金字塔线段绝对于整个金字塔的高度,示意特定数据点的值。
如您所知,金字塔图中的每个线段代表一个数据集,线段的高度代表该数据集的值。为了将段彼此辨别开来,您能够为它们的背景、边界等独自配置它们。在金字塔段左近,能够显示该金字塔的标签和值。
金字塔图
显着特色
单击交互式金字塔切片将它们与主金字塔离开。
右键单击图表并抉择查看 2D 以将 3D 金字塔无缝转换为 2D 金字塔。
以 2D 模式渲染金字塔,更好地管制边框和填充属性。
将值显示为理论值或百分比。
应用智能标签防止金字塔标签重叠。
在图表的侧面或核心搁置标签。
为每个金字塔切片应用自定义工具文本。
如果您违心,能够将每个金字塔切片链接到无效的指标,例如网页、Javascript 函数,甚至是深刻图表。
创立一个简略的金字塔图
应用上面给出的数据构建寰球财产金字塔(瑞士信贷 2013 年)图表,以理解当年世界财产的散布状况:
要创立金字塔图,请依照以下步骤操作:
在 JSON 数据中,按 ”<attributeName>”: “<value>” 格局设置属性及其对应的值。
应用 type 属性指定图表类型。要渲染金字塔图,请设置 pyramid。
应用 renderAt 属性设置容器对象。
应用 width 和 height 属性指定图表的维度。
应用 dataFormat 属性设置要传递给图表对象的数据类型 (www.diuxie.comJSON/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 属性值以指定将鼠标指针悬停在切片边框上时切片边框的厚度(以像素为单位)。