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圖表，該圖表顯示收入最高的3個州（加利福尼亞，華盛頓和內華達州）中排名前3位的電子品牌（Bose，Dell和Apple）。

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

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

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

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

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

顯示實際數據值

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

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

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

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

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

請參閱下面給出的代碼：

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

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

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

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

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正版授權，或了解更多產品信息請點擊