FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器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圖表。

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

該圖表類型屬于FusionCharts XT。

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

• 一個(gè)細(xì)分市場的總價(jià)值
• 該細(xì)分市場中所有競爭對手的合并份額
• 在細(xì)分市場中競爭對手的個(gè)人份額

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

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

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

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

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

列的高度可用于比較每個(gè)細(xì)分市場的TAM（總可用市場）。

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

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

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

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

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

默認(rèn)情況下，競爭對手的細(xì)分市場的總價(jià)值顯示在每一列的頂部。

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

請參閱下面給出的代碼：

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

隱藏了細(xì)分市場總價(jià)值的Marimekko圖表如下所示：

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

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

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

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

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

請參閱下面給出的代碼：

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

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

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

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

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