8个用于创建信息图表的CSS和JavaScript片段信息图是那些在印刷品和网页设计中同样流行的元素之一。不管是哪种媒介

信息图是那些在印刷品和网页设计中同样流行的元素之一。不管是哪种媒介，这些图形都能帮助读者更好地理解一个概念或过程。在它们的最佳状态下，信息图把复杂的东西变成了高度视觉化的，但又是简化的体验。

网络为信息图表提供了它自己独特的优势。互动性和响应性。与普通的图形相比，这些讲故事的元素可以变得更加方便用户。动画可以用来展示一个想法。而且，用网络技术构建的信息图也可以大大改善可及性。

我们收集了一些旨在用信息图画做更多事情的片段。有些可能不一定具有传统的构成。但它们仍然力求使信息更容易理解。

<！--
-->

Ana Tudor的《大步骤

概述一个多步骤的过程是网络上相当常见的东西。然而，要使事情变得容易理解，需要做一些工作。这个片断的优点是，编号的步骤既大胆又非常详细。它们在较小的视口上也能很好地降级。

有时，需要创造性的解决方案来表达你的观点。这个圆形的图表旋转着，概述了应对气候变化的各种方法。这种形式既有趣，又容易理解。它还展示了我们如何能多走一步，使信息对用户更有说服力。

请看笔响应式动画信息图。作者：萨拉-德拉斯纳

简单、直观、易懂，这个饼图很好地利用了互动性。点击公司的标志，它的容器就会打开，显示出更多的信息。它色彩鲜艳，并集成了一些灵活的动画。

请看Shalabh Vyas设计的PenInfographic Pie（基于SVG）。

电视新闻和体育节目喜欢用动画统计展示来吸引我们的眼球。这里我们有一系列的动画图表，让人想起我们经常在电视上看到的东西。这个片段利用运动和大胆的造型来吸引注意力。

查看Tiffany Rayside的PenCodePen统计信息图

互动性在这里得到了充分展示，因为你可以调整这个令人惊叹的3D图表上的数字和颜色。你可以为每个条目选择一个十六进制的颜色，并使用一个滑块来玩弄百分比。作为奖励，你还可以在屏幕上调整它的位置。

查看Archer的钢笔动态信息图

这是一个非常独特的建立信息图并使其互动的方法。它是一系列的CSS内容卡片，以重叠和交错的形式显示。将鼠标悬停在卡片上，会有一个动画显示出更多信息。可以想象，你可以让每个卡片都可以点击，引导用户进入相关内容。

请看《钢笔信息图》平滑的卡片视图作者：Sergiu Mocian

这里我们有一个交互式信息图，点击一个图标就可以在绿色的侧边栏中加载相关内容。这种类型的实现对于全屏演示来说是非常好的，可以让用户在身临其境的情况下了解更多。

在最基本的层面上，信息图应该是有吸引力的和容易理解的。这个只有CSS的例子很好地完成了这两点。插图中的咖啡杯不仅看起来很美味，而且还能代表它们的成分。这一点，加上味道的比例和成分的关键，都很好地结合起来。

请看《咖啡的笔类型》|纯CSS作者：Julie Park

静态文本或图像并不总是足以帮助用户更好地理解你的信息。正如它们在印刷领域几十年来所做的那样，信息图为网络上的数据交流提供了更多的用户友好手段。

当与最新的CSS和JavaScript技术相结合时，我们可以创建信息图，而不仅仅是一个花哨的统计布局。相反，它们可以成为一种互动和沉浸式的体验，既能娱乐又能教育人。