Victory-bar是一个开源的前端图表库包，用于绘制柱状图，可以快速、简单地创建柱状图，并且可定制数据显示方式。
在本文中，我们将会讨论如何使用npm包Victory-bar来创建一个基本的柱状图
安装npm包
在开始之前，你需要安装npm包。在命令行输入以下命令来安装：
npm install victory-bar --save
这将会在你的项目中安装victory-bar包并且储存在 node_modules 文件夹中。
导入必要的组件
import {VictoryChart, VictoryBar, VictoryTheme, VictoryAxis} from "victory";以上代码将会导入所有必须用到的组件，VictoryChart, VictoryBar和VictoryAxis都将用于绘制柱状图。
组件示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------------ ------------- ---- ----------
------ ------- ----- -------- ------- --------- -
-------- -
------ -
-----
-------- -------------
------------- ---------------- -- --- ---
-----------
-------
- --------- ------ ------ -- --
- --------- ------ ------ -- --
- --------- ------ ------ -- --
- --------- ------ ------ -- --
- --------- ------ ------ -- --
- --------- ------ ------ -- --
- --------- ------ ------ -- --
- --------- ------ ------ -- --
- --------- ------ ------ -- --
- --------- ------ ------ -- --
- --------- ------ ------ -- --
- --------- ------ ------ -- --
- --------- ------ ------ -- --
- --------- ------ ------ -- --
- --------- ------ ------ -- --
- --------- ------ ------ -- --
--
------------
---------
--
---------------
------
-
-
-此示例将绘制一个基本柱状图显示学生2018年春季学期的成绩分布。就目的而言，这里使用一个固定的数据集，其中每个学年级有三个成绩值，并且学年级的数据储存在 semester 字段中，成绩数据储存在 score 字段中。
VictoryBar组件的x和y属性用于指定数据集希望哪些字段用于指定条形图的横行和纵行。在这个例子中，x属性包含 semester ，y属性包含 score 。VictoryChart组件的 domainPadding 属性用来对x轴进行填充以保证x轴上的文本不会被砍掉。
自定义配置
Victory-bar提供了多种配置选项以调整外观和行为。
例如，如果你想要设置柱状图的标题，你可以在VictoryChart组件中传递一个 title 属性。
<VictoryChart domainPadding={{ x: 100 }}
title="Student scores for Spring 2018 Semester by grade level">
...
</VictoryChart>Victory-bar还支持多种图表类型，如折线图、散点图、区间图等等。如果对这些种类感兴趣，请查看Victory-bar官方文档。
总结
Victory-bar是一个非常强大而且灵活的图表库，可以为你的数据提供一个直观且易于理解的视觉呈现方式。通过npm package安装和相关的配置，你可以轻松地为你的数据创建一个基本的柱状图并在它上面添加自己想要的细节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/170934