|
Post by account_disabled on Jan 28, 2024 23:25:36 GMT -6
图表是快速有效地可视化复杂数据的好方法。无论您是想识别趋势、突出关系还是进行比较,图表都可以帮助您以精确且有意义的方式与受众进行沟通。在我之前个实际示例— 中,我介绍了 AnyChart 库并演示了它如何非常适合您的数据可视化需求。今天,我想更深入地研究一下 AnyChart 的数据映射功能,它允许您轻松地从自定义数据集创建漂亮的图表。 我还想了解自定义 AnyChart 以满足您的要求的多种方法,以及如何使用主题更改 AnyChart 图表的外观和风格。目前有 17 个现成主题可供选择,或者您也可以创建自己的主题。如果您对设计没有最好的眼光,为什么不购买我们的书来获得帮助呢? 作为 AnyChart 的研发主管,我可以花一整天的时间谈论这个库,但现在是时候开始谈正事了。 AnyChart 中的数据映射 为了促进将自定义数据源集成到图表应用程序中,AnyChart 有称为数据集的特殊对象。这些对象充当数据的中间容器。 当数据存储在数据集中时,AnyChart 可以跟踪数据的更改、分析数据并以更稳健和有效的方式处理这些数据。简而言之:交互式 JavaScript 图表从未如此简单! Learn to Code with JavaScript 无论您有对象数组、数组数组还是文件.csv,您都可以使用数据 WhatsApp 号码数据 集来: 确保对所创建的系列进行完全和明确的控制 定义哪一列是参数(x 轴) 定义哪些列保存哪个系列的值 过滤数据 排序数据 数据映射基础知识 了解数据映射在 AnyChart 中如何工作的最佳方法是查看示例。让我们想象一个具有以下自定义数据集的数组这里没有什么太疯狂的事情——这种自定义数据结构在许多现有应用程序中很常见。但现在您想在 AnyChart 中使用这个数组。对于许多其他图表库,您将被迫将数据转换为该库可以使中,真正的魔法就开始了:您现在可以创建所谓的视图。这些是从其他数据集派生的数据集。您会注意到,定义视图时,您确定包含原始数组中的哪些列以及这些列的名称。 然后,您可以使用它们来创建您喜欢的任何类型的图表。例如,以下是如何根据第五列中的自定义数据创建饼图。 Learn to Code with JavaScript 注意: AnyChart 只需要x和value字段即可创建饼图,但视图还包含一个meta包含第 6 列数据的字段。您可以映射任意数量的可选字段并根据需要使用它们。例如,这些字段可以包含要显示为标签或工具提示的附加数据这就是我们最终得到的结果: 注意:您可以在CodePen 集合中找到本文中的所有演示。 具有自定义数据集的多系列组合图 现在,让我们看看如何使用相同的自定义数据在同一绘图上创建包含折线图和范围面积图的组合图表。本节将非常短,因为现在您知道什么是视图。您需要做的就是选择正确的视图并显式创建必要的系列您会看到我们创建了一个自定义数据集和五个派生视图。其中四个按原样用于创建线条,但这只是冰山一角!您可以对对象数组和 CSV 数据执行相同的操作,并且可以排序、搜索、监听更改、浏览值以及更改现有行。
|
|