图表控件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。)
![](https://image.evget.com/attachment/keditor/image/20201228/20201228105130_38274.png)
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图表。)
![](https://image.evget.com/attachment/keditor/image/20201228/20201228105448_77135.png)
上面基本的交互式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上查看。)
![](https://image.evget.com/attachment/keditor/image/20201228/20201228105641_90271.png)
格式化图表轴
以下代码附加内容用于通过添加标题和更改轴的方向来格式化轴。
这是包含轴标题的代码:
// 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正版授权,或了解更多产品信息请点击【咨询在线客服】