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正版授权，或了解更多产品信息请点击