用CSS制作图表

有许多方法可以使数据可视化表示：条形图、折线图、散点图、迷你图……更不用说在web上实现它们的许多方法了。在这篇文章中，我将研究用于设置数据样式的普通CSS方法。但是在我们看一些例子之前，我认为有必要先简单回顾一下我们的设计目标。图表制作指南在web上开发图表有三条指南： 1. 可访问性：每个人都应该能够查看我们呈现的数据的某种格式，即使这是一个无聊的table（无聊总比没有好）。 2. 易于开发：图形制作不应该过于复杂，我们肯定希望避免未来的技术债务。 3. 性能：我们需要确保用户不会花费大量时间等待资产下载这些目标可能会随着图表的类型而改变，因为对于静态条形图来说，性能比疯狂的交互式地图更重要。考虑到这些指导原则，让我们看几个例子。CSS条形图有两种方法可以在CSS中制作简单的条形图。首先，我们将使用数据的定义列表：A title of the graphWe\"ll absolutely position the text content of each dd在左边有这个跨度。要使\"条\"直观地表示数据，我们将使用伪元素。为此，我们可以用.percentage-20这样的类来更新标记，并在伪元素上设置一个宽度：.percentage:after {content: \"\";display: block;background-color: #3d9970;}.percentage-20:after {width: 20%;}.percentage-30:after {width: 30%;}，但我们不想手工写出这些类中的每一个，因为数据将来可能会发生变化。我们可以编写一个Sass循环来为我们创建所有这些类：@for $i from 1 through 100 {.percentage-#{$i}:after {$value: ($i * 1%);width: $value;}}这有点棘手，因为它将创建一大堆我们可能不会在最终实现中使用的类，但是在生产中有很多工具可以为我们整理这些类。接下来，我们可以添加自动生成的类对于每个.percentage元素，例如：A title of the graphFinally we can add rules to the background of each .percentage元素，以帮助将这些值与repeating-linear-gradient进行比较时的易读性：.percentage {background: repeating-linear-gradient(to right,#ddd,#ddd 1px,#fff 1px,#fff 5%);}此技术相对简单，但我忍不住认为默认情况下应始终将此信息设置在table中。虽然我有点担心用这种方式设计桌子，但这并不意味着这是不可能的。例如，ericmeyer写了关于这种技术的文章，并描述了如何将挑剔的表元素定位为类似条形图的行为。这是他对表的原始标记：Unlike the example I used earlier, where I implemented a number of automatically generated helper classes in Sass to define the width of the bar charts, Eric used inline styles on the td元素，这些值由服务器端或JavaScript计算，而不是手工添加。下面的示例是我复制的Eric的原始示例，我对样式进行了一点更新：我非常喜欢表格中的每一行都有一个标题，如Q1、Q2等，这感觉非常整洁，而不是依赖定义列表来描述内容。它们很容易定位，如果CSS由于任何原因无法加载，它们将很好地返回到标准表。但是，这种方法的一个问题是，它要求绝对并排地定位每个表行，这意味着，如果我们想添加更多的数据，那么我们需要做的工作比简单地更新标记要多得多。这意味着在将来使用它可能会很痛苦。迷你图在表示这样的信息时，我们不必总是使用table。当我们制作一系列迷你图时，可能就是这种情况，这些迷你图位于一行文本旁边，帮助读者快速了解信息。Wilson Miner概述了这种方法，并确保事先将重点放在信息的可访问性上：I\"ve updated the original markup from what Wilson used since to me this feels like it should fit into a figure，因为MDN上的文档说明：通常是[一个图]…是一个图像、一个插图、一个图表、一个代码片段或一个在主文本中引用的模式，但这可以移到另一页或附录而不影响主要流程。这比简单的ul元素更有意义。但是不管怎样，这里是没有任何CSS的情况下的样子：非常容易访问！接下来，我们可以添加样式到sparkline元素，并将其放置在带有inline块的链接的右侧。同样，我们可以使用前面使用的Sass类生成器来设置每个条的高度。但是，让我们暂时保持这些样式的内联：确保将鼠标悬停在列表中的每个条目上，以查看我添加的图表的扩展版本。尽管它在分解数据方面并没有特别的帮助，但它表明我们并没有把图表放在一个单一的表示中；在使用简单的marku时，如此轻松地操纵这些可视化是一个很大的优势

用CSS制作图表

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么