JavaScript圖表工具FusionCharts入門教程(36)：帕累托圖

---

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來制作專業(yè)的JavaScript圖表。

點擊下載FusionCharts最新版

帕累托圖以Vilfredo Pareto命名，是一種將柱形圖和折線圖結合起來的圖表。帕累托圖中的數(shù)據(jù)值由列表示，這些列以降序排列。這些值的累積總計由向上的彎曲線顯示。帕累托圖用于隔離問題的關鍵原因。它們也可以用于確定成功的關鍵因素。

左垂直軸或主軸顯示發(fā)生頻率，成本或其他重要的度量單位。右垂直軸或輔助軸顯示總出現(xiàn)次數(shù)，總成本或特定度量單位總數(shù)的累計百分比。

帕累托圖

注意：單擊下面的氣泡以了解有關不同圖表組件的更多信息。

標題（也稱為圖表標題）是圖表的標題，您可以為標題添加自定義文本，以及配置其字體屬性和外觀。

• 在此處 了解如何添加字幕 。
• 字體屬性和標題的修飾符也可以使用屬性來自定義，請在此處詳細了解 。
• 您還可以自定義標題的對齊方式。在此處了解更多信息 。

可用的兩種帕累托圖是：

• 帕累托2D
• 帕累托3D

帕累托2D

在此示例中，讓我們創(chuàng)建一個pareto 2D圖表，以按員工各自報告的原因顯示其遲到情況。y軸主要顯示每月出現(xiàn)的員工人數(shù)，y軸顯示累積百分比。

要在2D模式下創(chuàng)建Pareto圖表，請執(zhí)行以下步驟：將type屬性設置為pareto2d。

• 在JSON數(shù)據(jù)中，以"": ""格式設置屬性及其對應的值。
• 使用type屬性指定圖表類型。要渲染pareto 2D圖表，請設置pareto2d。
• 使用renderAt屬性設置容器對象。
• 使用width和height屬性指定圖表的尺寸。
• 使用dataFormat屬性設置要傳遞給圖表對象的數(shù)據(jù)類型（JSON / XML）。

有關屬性的詳細列表，請參閱多系列pareto 2D圖表的圖表屬性頁面。

上面的代碼在2D中的pareto圖表如下所示：

帕累托3D

要以3D渲染pareto圖表，請將type屬性的值從更改pareto2D為pareto3D。其余數(shù)據(jù)結構保持不變。

有關屬性的詳細列表，請參閱多系列pareto 3D圖表的圖表屬性頁面。

一個簡單的Pareto 3D圖表如下所示：

上面兩個圖表的數(shù)據(jù)是單個系列。提供的值僅適用于柱狀圖。該線的百分比值會自動計算并添加到圖表中。

顯示值的線系列

默認情況下，不呈現(xiàn)折線圖的自動生成的百分比值。要指定折線圖的百分比數(shù)據(jù)值，請將showLineValues屬性設置為1。

請參閱下面給出的代碼：

{
  "chart": {
    "showLineValues": "1"
  },
}

配置為呈現(xiàn)折線圖的百分比值的pareto圖表如下所示：

自定義線數(shù)據(jù)集

在pareto圖表中，您可以自定義渲染線條的外觀。下面給出的化妝品可用于自定義線數(shù)據(jù)集。

• 將十六進制顏色代碼設置為lineColorattribute，以指定渲染線的顏色。
• 使用lineThinkness屬性指定線條的粗細（以像素為單位）。
• 使用lineAlpha屬性設置線段的透明度。此屬性采用介于0（透明）和100（不透明）之間的值。
• 將lineDashedattribute 的值設置為，1以將線段呈現(xiàn)為虛線。將此屬性設置為0會將它們渲染為整行。
• 如果線段顯示為虛線，請使用lineDashLen屬性設置每個破折號的長度。
• 如果線段顯示為虛線，請使用lineDashGap屬性設置每個破折號之間的間距。

請參閱下面給出的代碼：

{
    "chart": {
        "lineColor": "#8e0000",
        "lineThickness": "2",
        "lineAlpha": "80",
        "lineDashed": "1",
        "lineDashLen": "5",
        "lineDashGap": "3"
    },
}

具有自定義線段的pareto圖表如下所示：

隱藏輔助軸值

根據(jù)使用情況，按照以下步驟隱藏pareto圖的次要y軸：

• 指定showSecondaryLimits屬性以設置輔助y軸的上限和下限。將此屬性設置為0將隱藏限制，而將其設置為1（默認）將顯示限制。
• 指定showDivLineSecondaryValue屬性以設置是否顯示輔助y軸的分界線值。將此屬性設置為0將隱藏值，而將其設置為1（默認）將顯示它們。

請參閱下面給出的代碼：

{
  "chart": {
    "showSecondaryLimits": "0",
    "showDivLineSecondaryValue": "0"
  },
}

具有隱藏的輔助y軸的pareto圖表如下所示：

---

想要購買FusionCharts Suite XT正版授權，或了解更多產(chǎn)品信息請點擊