图表控件AnyChart使用JavaScript构建Marimekko图表
AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。
【慧都网】下载AnyChart正式版
您是否想知道如何使用JavaScript轻松地为基于HTML5的应用程序和网页创建交互式Marimekko图表？如果是，那么您将是学习此方法的最佳途径。
Marimekko图表也称为Mekko图表和市场地图，其Y轴显示的数值从0％到100％不等。最令人兴奋的部分在于它们的X轴，它表示类别中值的总和。每个类别在X轴上的宽度代表整个类别对所有数据总量的贡献。简而言之，这是一种可视化分类数据的堆叠图表。尽管如此，通过确定每个段的宽度和高度，Y轴和X轴都在百分比刻度上变化。
您是智能手机发烧友并且有兴趣按季度和供应商查看2019年全球智能手机出货量吗？然后，特别要遵循本教程，因为我们将使用简单的JS图表编码技术在优雅的Marimekko图表中可视化此市场数据。
如何创建基本的JS Marimekko图表
在JavaScript图表中可视化数据的一般顺序包括以下简单的四个步骤，并且构建JS Marimekko图表也不例外：
- 创建带有容器的HTML页面以显示图表。
- 连接您需要的所有脚本。
- 加载需要在图表中可视化的数据。
- 最后，编写JS图表代码。
现在，让我们深入研究每个步骤以绘制漂亮的Marimekko图表。
步骤1：建立HTML网页
第一步是建立一个基本的HTML页面来放置Marimekko图表。
<!DOCTYPE html>
<html>
<head>
<title>My Marimekko Chart Example</title>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
// Marimekko chart code goes here
</body>
</html>
上面开发的HTML页面由两个主要部分组成，标题（在<head></head>标签之间）和页面主体（在<body></body>标签之间）。在页眉部分，我们设置了HTML页面标题（在<title></title>标签之间）和CSS规则（在<style></style>标签之间）来管理container元素的外观。
div正文部分中ID为的元素container是将用于放置Marimekko图表的块。由于我希望图形显示在整个HTML页面上，因此我将容器元素的width和height字段设置为100％。因此，该图表将显示在整个页面上。
步骤2：连接所有必需的脚本
接下来，我们应该连接构建Marimekko图表所需的所有JavaScript脚本。
通常，对于所有JavaScript图表库来说，构建Marimekko或基本上任何其他图表的这些简单步骤都是相同的。在本教程中，我将以AnyChart为例。它是用于交互式数据可视化的流行的灵活JS库，它具有出色的文档和API参考以及许多演示，因此即使对于初学者来说，也很容易上手。
AnyChart具有模块化系统，这意味着您不需要整个库，而只能连接实际需要的那些图表类型和功能。这样，可以大大减少网页上运行的JavaScript代码的大小。它总是对性能有好处。因此，在我们的案例中，应使用“基本”和“ mekko”模块来表示Marimekko图表中的数据。它们将在标记的<head></head>部分中 进行引用<script></script>。
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script> <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
构建Marimekko图表所需的JavaScript代码应写在<body></body>HTML页面的标签之间。
以下是带有新更改的代码外观。是不是很酷？伙计们，继续读书。我们正在接近最令人兴奋的部分。
<!DOCTYPE html>
<html>
<head>
<title>My Marimekko Chart Example</title>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// Marimekko chart code goes here
</script>
</body>
</html>
步骤3：加载您要可视化的数据
如本教程开头所述，Marimekko属于2D堆叠图系列，但它通过改变列宽说明了数据的附加维。此图表类型广泛用于解释销售数据和执行市场分析，但是请确保您已根据需要正确选择数据。
您是否对2019年喜爱的智能手机品牌的全球出货量感到好奇？等待，让我们更深入地研究并季度可视化发货，以便使数据适合于Marimekko图表。
在当前情况下，Marimekko图表将用于说明2019年季度智能手机出货量排名前六的品牌（百万）。以下是我们将要使用的数据集。（来源：IDC。）
Mekko图形的奇妙之处在于，两个轴都以百分比表示数据，但是您只需要输入实际数据，图表便会自动计算所有数据。
我们将移动货件数据转换为特定的JavaScript对象，如下所示。它以数组数组的形式保存数据标题设置，标题和数据本身。
X轴包含每个智能手机品牌的总出货量，而Y轴用于按季度读取每个智能手机品牌的出货量百分比。
以下是我们将要使用的数据集。header以下JavaScript对象的设置用于设置每个智能手机生产商品牌的季度详细信息。因此，我们将看到季度关系。
var data = {
title: 'Global Smartphone Shipments (In Millions) in 2019, quarterly',
header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
rows: [
['Huawei', 59.1,56.6,66.8,56.2],
['Vivo', 23.9,27,31.3,31.5],
['Apple', 42,36.5,44.8,72.3],
['Samsung', 72,76.3,78.2,70.4],
['Xiaomi', 27.8,32.3,31.7,32.9],
['Oppo', 25.7,30.6,32.3,31.4],
['Others', 90.5,97.7,94.9,106.4],
]
};
步骤4：编写JS Marimekko图表代码
完成所有准备工作后，我们可以进入最后一节以显示最期待的Marimekko图表。负责显示Marimekko图表的整个JavaScript图表代码必须插入标记anychart.onDocumentReady()内编写的函数内<script>。顾名思义，该函数将等待页面准备显示数据。
<script>
anychart.onDocumentReady(function() {
// The entire JavaScript code of the Marimekko chart will be here
});
</script>
然后，使用步骤3中的代码来生成需要馈送到Mekko图表的数据。
var data = {
title: 'Global Smartphone Shipments (In Millions) in 2019, quarterly',
header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
rows: [
['Huawei', 59.1,56.6,66.8,56.2],
['Vivo', 23.9,27,31.3,31.5],
['Apple', 42,36.5,44.8,72.3],
['Samsung', 72,76.3,78.2,70.4],
['Xiaomi', 27.8,32.3,31.7,32.9],
['Oppo', 25.7,30.6,32.3,31.4],
['Others', 90.5,97.7,94.9,106.4],
]
};
下一步是指定JS图表类型。在这种情况下，我们应该使用mekko图表并将其与要在Marimekko图表中可视化的数据一起输入。
// create a mekko (marimekko) chart var chart = anychart.mekko(); // set the chart data chart.data(data);
让我们启用图表的图例，如下所示。
// enable the chart legend chart.legend(true);
最后，命令在容器中绘制Marimekko图表：
// set the chart container id
chart.container('container');
// draw the resulting marimekko chart
chart.draw();
这是我们等待的结果。（请参阅AnyChart Playground上的基本Marimekko图表。）
上面基本的交互式HTML5 Marimekko图表的完整代码如下。
<!DOCTYPE html>
<html>
<head>
<title>My Marimekko Chart Example</title>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<script>
anychart.onDocumentReady(function () {
// create data
var data = {
title: 'Global Smartphone Shipments (In Millions) in 2019',
header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
rows: [
['Huawei', 59.1,56.6,66.8,56.2],
['Vivo', 23.9,27,31.3,31.5],
['Apple', 42,36.5,44.8,72.3],
['Samsung', 72,76.3,78.2,70.4],
['Xiaomi', 27.8,32.3,31.7,32.9],
['Oppo', 25.7,30.6,32.3,31.4],
['Others', 90.5,97.7,94.9,106.4],
]
};
// create a mekko (marimekko) chart
var chart = anychart.mekko();
// set the chart data
chart.data(data);
// enable the chart legend
chart.legend(true);
// set the chart container id
chart.container('container');
// draw the resulting marimekko chart
chart.draw();
});
</script>
</body>
</html>
自定义JS Marimekko图表
好吧，这部分是为蛋糕锦上添花。您在AnyChart中拥有大量的文档资源，可以在其中获得深入的知识，以改进，更改和自定义生成的图表。要获取灵感，请查看演示库。
让我们尝试修改我们的JavaScript Marimekko图表，使其外观更加优雅。
使用调色板更改图表颜色
可以使用“调色板”选项自定义Marimekko图表的颜色。请参阅本手册 以找到有关AnyChart调色板的更多详细信息。在下面的例子中，我们应用了Wines面板。还有更多的预建调色板正在等待您。
// apply a palette for coloring chart.palette(anychart.palettes.wines);
图表不是很方便吗？（在AnyChart Playground上查看。）
格式化图表轴
以下代码附加内容用于通过添加标题和更改轴的方向来格式化轴。
这是包含轴标题的代码：
// set the x-axis title
chart.xAxis().title('Smartphone Shipments by Brands');
// set the y-axis title
chart.yAxis().title('Smartphone Shipments by Quarters %');
Y轴的方向可以是左侧或右侧。保留默认值。X轴的方向可以设置为顶部或底部，默认情况下将其设置为底部。根据您的兴趣配置它们。在两个轴的方向上进行以下更改。出于演示目的，将X轴和Y轴的方向设置为顶部和右侧。
// set the x-axis orientation
chart.xAxis().orientation("top");
// set the y-axis orientation
chart.yAxis().orientation("right");
该图表似乎更易于使用轴标题。（在AnyChart Playground上查看。）
从下一个示例开始，Marimekko图表轴的方向将恢复为默认外观。
设置图表格式的工具提示
工具提示通常是隐藏的，但是当悬停在图表的点上时，它们会变得可见。这可以用来显示其他有用的信息。
第一步，让我们生成悬停时需要显示的信息。根据以下代码段，我们显示seriesName（季度）和value（（相应季度的发货金额，以百万美元为单位）。
// customize the tooltip format
chart.tooltip().format('{%seriesName}: ${%Value}M');
“联合”显示模式有助于一次显示所有季度的数据。
// set the tooltip display mode
chart.tooltip().displayMode("union");
以下只是对Marimekko图表工具提示标题的视觉外观进行的另一种简单修改。我们可以如下所示更改字体大小，背景外观和字体粗细。
// customize the tooltip title
var title = chart.tooltip().title();
title.fontFamily("Calibri");
title.fontDecoration("underline");
title.fontWeight(700);
title.fontSize(18);
我们基于JS的Marimekko图表似乎变得越来越好，更具可读性。（在AnyChart Playground上查看。）
格式化图表标签设置
标签是可以与图表上的点一起显示的文本框。标签通常指示每个点包含的信息。让我们在此Marimekko图表中配置标签，以添加每个季度的装运价值以百万美元显示。
// set the chart labels settings
chart.labels().format('${%Value}M');
最后，这是我们在如上所述进行相关自定义后的交互式Marimekko图表的外观。（在AnyChart Playground上查看。）
新定制的高级Marimekko图表比初始可视化看起来更具信息量和吸引力。您可以发挥创意，以向图表显示更多详细信息。
根据最终确定的Marimekko图表，三星是2019年全球领先的智能手机供应商。但是请注意，三星！华为似乎很快就会挑战您。您是否注意到苹果在第四季度的表现异常出色，击败了所有竞争对手？这项杰出成就背后的成功故事是iPhone 11系列的发布，引起了全球众多人的关注。
伙计们，请使用您的数据，因为他们正在等待为您揭示令人兴奋的信息。
以下是本教程中最终Marimekko图表的完整HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>My Marimekko Chart Example</title>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<script>
anychart.onDocumentReady(function () {
// create data
var data = {
title: 'Global Smartphone Shipments (In Millions) in 2019',
header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
rows: [
['Huawei', 59.1,56.6,66.8,56.2],
['Vivo', 23.9,27,31.3,31.5],
['Apple', 42,36.5,44.8,72.3],
['Samsung', 72,76.3,78.2,70.4],
['Xiaomi', 27.8,32.3,31.7,32.9],
['Oppo', 25.7,30.6,32.3,31.4],
['Others', 90.5,97.7,94.9,106.4],
]
};
// create a mekko (marimekko) chart
var chart = anychart.mekko();
// set the chart data
chart.data(data);
// enable the chart legend
chart.legend(true);
// apply a palette for coloring
chart.palette(anychart.palettes.wines);
// customize the tooltip format
chart.tooltip().format('{%seriesName}: ${%Value}M');
// set the tooltip display mode
chart.tooltip().displayMode("union");
// customize the tooltip title
var title = chart.tooltip().title();
title.fontFamily("Calibri");
title.fontDecoration("underline");
title.fontWeight(700);
title.fontSize(18);
// set the chart labels settings
chart.labels().format('${%Value}M');
// set the x-axis title
chart.xAxis().title('Smartphone Shipments by Brands');
// set the y-axis title
chart.yAxis().title('Smartphone Shipments by Quarters %');
// set the chart container id
chart.container('container');
// draw the resulting marimekko chart
chart.draw();
});
</script>
</body>
</html>
结论
使用JavaScript构建Marimekko图表是否比指南开始时想象的要容易呢？某些诸如此类的图表库的API易于访问，内容丰富，并且可以使您的数据可视化开发工作变得非常容易。可用的强大文档将帮助您快速解决编码时可能遇到的任何问题。祝好运！
相关产品推荐：
AnyGantt-构建复杂且内容丰富的甘特图的理想工具
AnyMap-可交互式地图是AnyChart组件
AnyStock-基于XML/JSON的Flash金融图表解决方案
APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率
想要购买AnyChart正版授权，或了解更多产品信息请点击【咨询在线客服】
