JavaScript圖表工具FusionCharts入門教程(37)：如何創建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來制作專業的JavaScript圖表。

點擊下載FusionCharts最新版

該圖表類型屬于FusionCharts XT。

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

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

Marimekko圖表

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

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

創建一個Marimekko圖表

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

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

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

要創建marimekko圖表，請按照以下步驟操作：

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

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

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

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

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

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

顯示實際數據值

Marimekko圖表中的堆疊列可以呈現：

• 使用百分比值
• 使用實際數據值

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

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

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

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

將showSum屬性設置0為隱藏彼此重疊的所有數據圖的總和。總和顯示在堆疊的列上方。此屬性的默認值為1。

請參閱下面給出的代碼：

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

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

百分比市場份額值

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

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

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

圖例交互

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

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

情節設置寬度

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

請參閱下面給出的代碼：

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

設置分離屬性

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

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

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

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

---

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