JavaScript图表工具FusionCharts入门教程(37)：如何创建Marimekko图表

Marimekko图表是具有可变宽度的列的堆叠柱形图。它们主要用于市场分析。本文详细介绍如何创建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图表如下所示：

列的高度可用于比较每个细分市场的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正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：

来源：慧都