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

---

FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡(jiǎn)單的HTML頁(yè)面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬(wàn)用戶選擇Fusioncharts來(lái)制作專業(yè)的JavaScript圖表。

點(diǎn)擊下載FusionCharts最新版

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

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

帕累托圖

注意：?jiǎn)螕粝旅娴臍馀菀粤私庥嘘P(guān)不同圖表組件的更多信息。

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

• 在此處 了解如何添加字幕 。
• 字體屬性和標(biāo)題的修飾符也可以使用屬性來(lái)自定義，請(qǐng)?jiān)诖颂幵敿?xì)了解 。
• 您還可以自定義標(biāo)題的對(duì)齊方式。在此處了解更多信息 。

可用的兩種帕累托圖是：

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

帕累托2D

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

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

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

有關(guān)屬性的詳細(xì)列表，請(qǐng)參閱多系列pareto 2D圖表的圖表屬性頁(yè)面。

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

帕累托3D

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

有關(guān)屬性的詳細(xì)列表，請(qǐng)參閱多系列pareto 3D圖表的圖表屬性頁(yè)面。

一個(gè)簡(jiǎn)單的Pareto 3D圖表如下所示：

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

顯示值的線系列

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

請(qǐng)參閱下面給出的代碼：

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

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

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

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

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

請(qǐng)參閱下面給出的代碼：

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

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

隱藏輔助軸值

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

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

請(qǐng)參閱下面給出的代碼：

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

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

---

想要購(gòu)買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊【咨詢?cè)诰€客服】