如何建立JavaScript圖表工具-金字塔圖

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屬性設定要傳遞給圖表物件的資料型別 (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"
  }
}