数据可视化在今天的情况下是一个有价值的工具，数据无处不在，有各种机会可以利用这些数据来寻找洞察力。视觉图表对于沟通思想、识别模式和充分利用现有数据来说是必不可少的。
那么，你是否想快速、轻松地学习如何创建一个真正酷的图表，有趣地展示数据？
马赛克图表是一种多系列图表，可以有效地表示超过2个参数的数据，所谓的多系列图表是因为每个数据点都有独特的压痕，使其在视觉上类似于一幅马赛克艺术品。这种图表不仅外观漂亮，而且对表示多个变量和认识这些不同变量之间的关系非常有帮助。
2020年并不全是坏事，至少对个人电脑的市场来说是这样。随着越来越多的人在家工作和学习，个人电脑的销售在2020年的每个季度都在增加。我根据全球出货量，探讨了每个品牌在每个季度的表现。
下面看看最后的图表，让你兴奋不已!
跟随这个快速教程，前端网络开发者和数据可视化爱好者可以掌握用JavaScript创建马赛克图表的方法。
用4个简单的步骤建立一个JS马赛克图表
马赛克图可能看起来很刺激，但却很难创建。然而，用一个JavaScript图表库来创建这种图表是非常直接和容易的，因为它可以消除很多编码的负担，让你快速得到一个图表，而且技术细节最少。
在本教程中，我使用的是AnyChart JS库。我选择AnyChart是因为它既灵活又容易上手。它特别适合于初学者，因为它有大量的文档，还有许多有用的例子。
在可视化数据时，拥有一些HTML和JavaScript等技术背景是一个优势。尽管如此，用JS库创建交互式图表是非常简单的，用几乎所有支持这种图表类型的JavaScript库创建马赛克图表的步骤都是差不多的。
创建JS马赛克图表的4个基本步骤是。
- 为图表创建一个HTML页面。
- 添加必要的JavaScript文件。
- 连接数据。
- 编写绘制图表所需的JS代码。
1.创建一个基本的HTML页面
首先要做的是创建一个基本的HTML页面，用来存放图表。接下来，创建一个HTML块元素，为了在以后的代码中识别这个
我给这个块的宽度和高度都是100%，这样图表就会填满整个页面，但也可以根据你的喜好来指定。
2.引用必要的JavaScript文件
下一步是添加图表库脚本以创建马赛克图表。我包括来自AnyChartCDN的相应文件，因为我使用的就是这个库。当然，这些脚本也可以下载，并以此为参考。
对于这个图表，我需要核心脚本，以及用于马赛克图表的特定模块。在这里，马赛克图表的模块包含了3种不同类型的Marimekko图表，马赛克是其中之一。如果你想了解更多关于这些图表和它们的具体特征，请查看AnyChart关于Marimekko图表的文档。
我将这两个脚本添加到我的HTML页面的部分。
3.设置数据
我整理了Gartner给出的2020年每个季度的不同PC品牌的销售数据。为了方便创建马赛克图表，我把数据处理成适合它的格式，由于数据有限，我直接在代码中添加了它。
在这里，我在X轴上绘制了各季度的数据，而品牌则是单独的瓦片，所以我在标题数据中添加了品牌，在行中添加了季度数据。
现在我们已经完成了所有的准备工作，让我们继续进行最后一步，绘制别致的、交互式的JS马赛克图表吧
4.为你的图表编写JavaScript代码
对于没有多少编码经验的人来说，编写代码可能听起来令人生畏，但相信我，要想画出一个漂亮的马赛克图表，只需要写5行就够了。
在做其他事情之前，我先添加一个函数，将所有的代码包围起来，这样可以确保里面的整个代码只有在页面准备好之后才会执行。然后我把数据放在这个函数里。
接下来，我用内置的函数创建马赛克图表，并设置数据。
最后，我添加对绘制图表的容器的引用，设置图表的标题，并启动绘制。
看吧!一个迷人的、实用的马赛克图表被创建了!
你可以立即看到每个季度的出货量是如何通过每个季度的宽度增加而增加的。在品牌方面，联想是明显的市场领导者，其销售额逐季增长。另外，可以清晰地看到的是，联想、惠普和戴尔占据了50%以上的市场。
请看一下这个初始版本的马赛克图表，以及CodePen上的完整JS/CSS/HTML代码。
定制马赛克图表
大多数像样的JS图表库都允许你使用其API来定制图表。这些定制可以使你的数据可视化脱颖而出，具有个性化的美感，并改善你想要传达的信息的表达。
现在，基本的马赛克图表已经创建，让我告诉你如何通过一些简单的定制来提高图表的数据表现能力和调整其外观。
1.缩小单个瓷砖之间的空间
为了改善马赛克的外观，我只用一行代码就减少了每个点之间的空间。
2.改进数据标签的呈现
数据中的数值是以数字形式出现的，单位是千。为了使其更具可读性和易懂性，我改变了数字的格式，以展示以百万为单位的数字。我还更新了图表的标题以反映这一修改。
你可以在CodePen上查看这个中间版本的马赛克图表的全部代码。
3.改变颜色主题并进行其他相关修改
为了使马赛克图表更加个性化，我决定使用不同的调色板。AnyChart提供了一些很好的内置主题，包括预定义的设置，如图表数据点的颜色以及背景，以及独特的字体。你也可以创建一个自定义的主题，但对于这个图表，我选择了一个开箱即用的主题，感觉像老一代的PC屏幕。
我在部分添加主题脚本，然后添加一行代码，为马赛克图表设置主题。
固有的字体大小对我的喜好来说略小，所以我在样式设计中指定了字体的大小。另外，我想让图表的标题更大一些，所以我也添加了一些代码来修改它。
另外，我想让图表的标题更大一些，所以我也添加了一些代码来修改它。
啊哈！马赛克图表看起来是不是非常有个性，非常吸引人？
4.增强工具提示
最后要做的是使工具提示的信息量更大，格式更好。由于这是一个马赛克图表，单个数据点非常明显的可识别，我希望工具提示显示该特定季度的所有数据值。这可以通过指定工具提示的显示模式来实现。
最后，我只是调整了工具提示的外观。
这就是了!一个非常吸引人的、信息丰富的JavaScript马赛克图表已经准备好了。
在这里或CodePen上看一下马赛克图表的最终代码。
结语
正如你所看到的，在图表库的帮助下，建立一个创造性的、交互式的JS马赛克图表并不困难。当然，这只是表面现象，所以要继续尝试不同的图表以及数据集。还有很多其他的JS图表库可以探索，或者如果你想的话，可以在AnyChart中查看一些很棒的其他图表类型。
使用你的那台联想或戴尔（或者你是一个Mac人？）来创建可视化，请在这里分享你的创作。当然，如果你有任何问题，请告诉我。
主题。
javascript, 数据科学, 图表, 数据, html, 数据可视化, 初学者教程,教程, webdev
DZone贡献者所表达的观点属于他们自己。
