` 容器包装器 |
| 渲染工具提示 | PropTypes.func.is 必需 | \- 说吧 | 显示 _目录_ 工具提示,签名 `({ event, data, datum, color, index }) => node`如果该函数返回 a `falsy` 值,将不提供工具提示. |
| 样式 | PropTypes.object 主题 | {} | 要添加的样式 `
` 容器包装器 |
| 工具提示组件 | PropTypes.func 或 propTypes.object | `@vx`是因为 `TooltipWithBounds` | 用作工具提示容器组件的组件(而非实例)。 它通过 `top` 财务报告和审定财务报表 `left` 定位数字 |
| 工具提示 | PropTypes.object 主题 | \- 说吧 | 传递给 `TooltipComponent` |
| 工具提示超时 | PropTypes. 数 | 200个 | 调用时工具提示隐藏的超时 `onMouseLeave` |
### 主题
具有以下形状的主题对象可以传递到 `` 用于样式图、轴和系列。 或者,按键(例如 `xAxisStyles`)可以直接传递到轴元件上.
见 [`@data-ui/theme`](https://github.com/williaster/data-ui/blob/master/packages/data-ui-theme/src/chartTheme.js) 举个例子.
```
export const themeShape = PropTypes.shape({
gridStyles: PropTypes.shape({
stroke: PropTypes.string,
strokeWidth: PropTypes.number,
}),
xAxisStyles: PropTypes.shape({
stroke: PropTypes.string,
strokeWidth: PropTypes.number,
label: PropTypes.shape({
bottom: PropTypes.object,
top: PropTypes.object,
}),
}),
yAxisStyles: PropTypes.shape({
stroke: PropTypes.string,
strokeWidth: PropTypes.number,
label: PropTypes.shape({
left: PropTypes.object,
right: PropTypes.object,
}),
})
xTickStyles: PropTypes.shape({
stroke: PropTypes.string,
tickLength: PropTypes.number,
label: PropTypes.shape({
bottom: PropTypes.object,
top: PropTypes.object,
}),
}),
yTickStyles: PropTypes.shape({
stroke: PropTypes.string,
tickLength: PropTypes.number,
label: PropTypes.shape({
left: PropTypes.object,
right: PropTypes.object,
}),
}),
});
```
## 发展
```
npm install
yarn run dev # or 'build'
```
## 常见问题
### @data-ui/histogram 是什么？
反应 \+ d3 创建直方图库
### 如何安装 @data-ui/histogram？
在项目目录运行 npm install @data-ui/histogram，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^15\.0\.0-0 \|\| ^16\.0\.0-0）、react-dom（^15\.0\.0-0 \|\| ^16\.0\.0-0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @data-ui/histogram 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/data-ui\_\_histogram 是否存在。
### @data-ui/histogram 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @data-ui/histogram 可以商用吗？
@data-ui/histogram 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @data-ui/histogram 的下载量有多少？
根据 npm 官方下载统计，@data-ui/histogram 在 2026/10/12 – 2026/11/10 这 30 天内被下载 17,164 次，日均约 572 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @data-ui/histogram 还在维护吗？
最新版本 0\.0\.84 发布于 2019/11/20（6 年前）；至今共发布 40 个版本，其中过去 12 个月发布了 0 个；首次发布于 2017/08/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。