我喜欢数据。我也喜欢JavaScript。然而，数据和客户端JavaScript通常被认为是相互排斥的。业界通常将数据处理和聚合视为后端函数，而JavaScript仅用于显示预聚合数据。带宽和处理时间被视为客户端处理数据的巨大瓶颈。而且，在大多数情况下，我同意。但是在某些情况下，在浏览器中处理数据是完全合理的。在这些用例中，我们如何才能成功？

想想这些数据

使用JavaScript处理数据既需要完整的数据，也需要了解可用的工具，而不必进行不必要的服务器调用。它有助于区分三边数据和汇总数据。

三边数据由原始的事务性数据组成。这是低层次的细节，它本身几乎是不可能分析的。在光谱的另一边，你有你的汇总数据。这是可以有意义和深思熟虑的方式提出的数据。我们称之为我们的组合数据。对于开发人员来说，最重要的是位于事务细节和完全组合数据之间的数据结构。这是我们的“甜蜜之地”这些数据集是聚合的，但包含的内容超过了最终表示所需的内容。它们是多维的，因为它们有两个或更多不同的维度，为如何显示数据提供了灵活性。这些数据集允许最终用户对数据进行格式化，并提取信息以供进一步分析。它们很小，很有表现力，但是提供了足够的细节。

将您的数据以完美的形式处理，这样您就可以避免前端的任何和所有的操作，这并不需要成为目标。相反，将数据简化为多维数据集。定义客户感兴趣的几个关键维度(例如，人员、产品、地点和时间)和度量(例如，总和、计数、平均值、最小值和最大值)。最后，用表单元素表示页面上的数据，这些元素可以允许更深入分析的方式对数据进行切片。

创建数据集是一种微妙的平衡。您将希望有足够的数据使您的分析有意义，而不会给客户端机器带来太多的压力。这意味着提出明确、简洁的要求。根据数据集的宽度，您可能需要包含许多不同的维度和度量。有几件事要记住：

• 内容的多样性是边缘情况还是将被频繁使用的东西？遵循80/20规则：80%的用户通常需要20%的可用资源。
• 每个维度都是有限的吗？尺寸应该始终有一组预定的值。例如，不断增加的产品库存可能过于庞大，而产品类别则可能运转良好。
• 在可能的情况下，特别是汇总数据日期。如果你能通过几年的积累而逃脱，那就去做吧。如果你需要下降到季度或几个月，你可以，但避免任何更深的。
• 少就是多。值较少的维度对性能更好。例如，以200行数据集为例。如果添加另一个具有四个可能值的维度，其增长最多的是200*4=800行。如果添加一个具有50个值的维度，它将增长200*50=10，000行。这将与您添加的每个维度复合。
• 在多维数据集中，避免总结每次数据集更改时都需要重新计算的度量值。例如，如果计划显示平均值，则应包括总计和计数。动态计算平均值。这样，如果您正在汇总数据，则可以使用汇总值重新计算平均值。

在尝试上述任何操作之前，请确保您了解正在处理的数据。你可能会做出一些错误的假设，导致错误的决策。数据质量始终是第一要务。这适用于您正在查询和制造的数据。

永远不要使用数据集，并对维度或度量进行假设。不要害怕要求数据字典或其他有关数据的文档，以帮助您了解所查看的内容。数据分析不是你猜的。可以应用业务规则，也可以预先过滤掉数据。如果您面前没有这些信息，那么您很容易就会生成毫无意义的数据集和可视化，甚至更糟糕的是，这些数据集和可视化都是完全误导的。

如何使数据结构就位

AJAX和FETCH API

JavaScript有多种方法从外部源检索数据。历史上，您会使用XHR请求。XHR受到广泛支持，但也相当复杂，需要几种不同的方法。还有一些jQuery的AjaxAPI。这有助于降低复杂性和提供跨浏览器支持。如果您已经在使用这些库，这可能是一个选项，但我们希望尽可能选择本机解决方案。

对于我们的用例，我们将使用FETCH API将数据拉到我们的应用程序中：

window.fetchData = window.fetchData || {}; fetch('./data/aggregate.json') .then(response => { // when the fetch executes we will convert the response // to json format and pass it to .then() return response.json(); }).then(jsonData => { // take the resulting dataset and assign to a global object window.fetchData.jsonData = jsonData; }).catch(err => { console.log("Fetch process failed