JavaScript圖表工具FusionCharts入門教程(37)：如何創(chuàng)建Marimekko圖表

---

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最新版

該圖表類型屬于FusionCharts XT。

Marimekko圖表是具有可變寬度的列的堆疊柱形圖。它們主要用于市場分析。
可以使用Marimekko圖表表示營銷數(shù)據(jù)的以下三個維度：

• 一個細分市場的總價值
• 該細分市場中所有競爭對手的合并份額
• 在細分市場中競爭對手的個人份額

Marimekko圖表

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

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

創(chuàng)建一個Marimekko圖表

讓我們創(chuàng)建一個簡單的Marimekko圖表，該圖表顯示收入最高的3個州（加利福尼亞，華盛頓和內(nèi)華達州）中排名前3位的電子品牌（Bose，Dell和Apple）。

在默認模式下，如下所示的Marimekko圖表可幫助您立即找出以下內(nèi)容：

• 每個州（Bose，Dell和Apple）內(nèi)排名前三位的制造商，以及一個州內(nèi)每個制造商的個人銷售額（由堆疊列中的分區(qū)表示）。
• 在給定的持續(xù)時間（在本例中為一個月）中，所有三個州的制造商總銷售額，顯示在每個制造商的堆疊列頂部。例如，Bose的總銷售額為\ $ 848K，顯示在第一列上方。
• 每個制造商的市場份額百分比，顯示為堆疊列之間的百分比標簽。例如，如Bose和Dell的數(shù)據(jù)圖之間的標簽所示，Bose的總市場份額約為46％。

要創(chuàng)建marimekko圖表，請按照以下步驟操作：

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

有關屬性的詳細列表，請參閱marimekko圖表的圖表屬性頁面。
上面代碼的marimekko圖表如下所示：

如您在圖表數(shù)據(jù)中所見，已提供了實際的銷售數(shù)據(jù)。Marimekko圖表會根據(jù)細分市場的規(guī)模以及每個細分市場中競爭對手所占的百分比自動將這些值轉(zhuǎn)換為百分比值。

該分區(qū)的工具提示文本中顯示了細分中每個制造商的份額百分比。例如，Bose在華盛頓的百分比份額約為25％；當鼠標指針懸停在第一列中的Washington分區(qū)上時，可以在顯示的工具提示文本中看到它。

列的高度可用于比較每個細分市場的TAM（總可用市場）。

現(xiàn)在，讓我們自定義marimekko圖表的外觀和屬性。我們還將討論在FusionCharts v3.11.0中為marimekko圖表引入的交互式圖例。

顯示實際數(shù)據(jù)值

Marimekko圖表中的堆疊列可以呈現(xiàn)：

• 使用百分比值
• 使用實際數(shù)據(jù)值

默認情況下，Marimekko圖表使用沿y軸的百分比值呈現(xiàn)。要使用實際數(shù)據(jù)值呈現(xiàn)圖表，請將設置usePercentDistribution為0。此屬性指定是否將在y軸上使用百分比分布來繪制數(shù)據(jù)。此屬性的默認值為1。
請參閱下面給出的代碼：

{
  "chart": {
    "usePercentDistribution": "0"
  }
}

用實際值而不是百分比值呈現(xiàn)的Marimekko圖表如下所示：
隱藏的細分市場總值

默認情況下，競爭對手的細分市場的總價值顯示在每一列的頂部。

將showSum屬性設置0為隱藏彼此重疊的所有數(shù)據(jù)圖的總和?？偤惋@示在堆疊的列上方。此屬性的默認值為1。

請參閱下面給出的代碼：

{
  "chart": {
    "showSum": "0"
  }
}

隱藏了細分市場總價值的Marimekko圖表如下所示：

百分比市場份額值

默認情況下，在Marimekko圖表的各列之間沿x軸顯示標簽，以顯示競爭對手的市場價值份額。這些標簽可以顯示/隱藏，具體取決于用戶的要求。將showXAxisPercentValues屬性設置0為隱藏沿x軸的百分比值。此屬性的默認值為1。
請參閱下面給出的代碼：

{
  "chart": {
    "showXAxisPercentValues": "0"
  }
}

在x軸上隱藏了百分比標簽的Marimekko圖表如下所示：

圖例交互

Marimekko圖表包括對從FusionCharts Suite XT v3.11.0開始的交互式圖例的支持。Marimekko圖表的交互式圖例實現(xiàn)不僅可以顯示/隱藏數(shù)據(jù)圖，還可以管理隱藏數(shù)據(jù)圖時騰出的空間。因此，百分比標簽也將更新以反映圖表的當前狀態(tài)。

例如，在上面顯示的Marimekko圖表中，如果要使用圖例隱藏華盛頓的數(shù)據(jù)圖，則加利福尼亞和內(nèi)華達州的數(shù)據(jù)圖將自動排列在可用空間中，如下圖所示：

情節(jié)設置寬度

在FusionCharts XT中，您可以按百分比值設置各個圖的寬度。使用categorylevelwidthPercent屬性來這樣做。

請參閱下面給出的代碼：

{
  "chart": { },
  "categories": [{
        "category": [{
            "label": "Bose",
            "widthPercent": "45"
          }
      }
}

設置分離屬性

分隔符屬性允許您在圖表中設置小數(shù)和千位分隔符。您可以使用以下屬性來配置小數(shù)和千位分隔符：

• decimalSeparator 指定用作小數(shù)點分隔符的字符。
• thousandSeparator 指定用作千位分隔符的字符。
• inDecimalSeparator 指定數(shù)據(jù)源中使用的輸入小數(shù)點分隔符。
• inThousandSeparator 指定在數(shù)據(jù)源中使用的輸入千位分隔符。

不同的地理區(qū)域和語言使用不同的字符來分隔小數(shù)和千位，例如，,用作小數(shù)分隔符而不是.。

下表顯示了,用作小數(shù)點分隔符和.千位分隔符的用法：

---

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