什么是 datos？
datos 是一个前端 JavaScript 库，它是用于数据可视化的最小型库之一。它使用了 d3.js 数据可视化库的可视化引擎，但是将它们严格分离开来，使得它非常适合开发者在现有的应用程序中添加可视化特性。
如何使用 datos？
安装 datos
你可以使用 npm 安装 datos：
npm install datos
导入 datos
在项目中导入 datos：
import * as datos from 'datos';
初始化 datos
在你的 HTML 页面中创建一个元素并将其传递给 datos 的初始化函数：
const el = document.getElementById('my-element');
const chart = datos.initialize(el);注意: datos.initialize接受两个选项，包括 width 和 height, 表示绘图区域的显示范围。
提供数据
在 datos 中创建一个数据源，并将其传递给 chart：
const data = [
{ name: 'Alice', age: 34 },
{ name: 'Bob', age: 28 },
{ name: 'Charlie', age: 55 }
];
chart.setData(data);添加图表类型
现在，我们可以通过使用 datos 支持的多个图表类型之一来设置图表类型，例如这里的柱状图：
const options = {
type: 'bar',
x: 'name',
y: 'age'
};
chart.setOptions(options);- type - 图表类型，默认值为 line。
- x - 数据源的 x 轴字段。
- y - 数据源的 y 轴字段。
绘制并渲染图表
最后，调用 render 方法将图表渲染到视图中：
chart.render();
完整的示例代码
<div id="chart"></div>
-- -------------------- ---- ------- ------ - -- ----- ---- -------- ----- -- - --------------------------------- ----- ----- - -------------------- - ------ ---- ------- --- --- ----- ---- - - - ----- -------- ---- -- -- - ----- ------ ---- -- -- - ----- ---------- ---- -- - -- ----- ------- - - ----- ------ -- ------- -- ----- -- -------------------- -------------------------- ---------------
总结
使用 datos，您可以很方便地在您的 JavaScript 应用程序中添加动态的数据可视化功能。使用简单、轻量，是一个很好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f781e8991b448e0c3c