国产乱婬果冻传媒,操碰91操碰,日韩精品黄一区二区

JavaScript圖表工具FusionCharts入門教程(50)：金字塔圖

翻譯|使用教程|編輯：楊鵬連|2021-06-04 16:54:53.503|閱讀 301 次

概述：使用金字塔圖來比較數據，例如產品一年的銷售數據。金字塔圖由多個段組成，每個段代表一個數據點。金字塔線段相對于整個金字塔的高度，表示特定數據點的值。

相關鏈接：

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"
  }
}