@data-ui/无线电图
演示到 (原始内容存档于2017-10-21). williaster.github.io/data-ui
概览
此套件导出声明性反应 <RadialChart />已执行
@vx (帮助) 用来做甜甜圈和派
图表取决于道具。 如演示所示,结合
@vx/ legend (英语) 财务报告和审定财务报表
@vx/ 比例
用于创建可再使用的射线图.
使用量
见演示 (原始内容存档于2017-10-21). williaster.github.io/data-ui 页:1 更多实例产出.
import { scaleOrdinal } from '@vx/scale';
import { LegendOrdinal } from '@vx/legend';
import { color as colors } from '@data-ui/theme';
import { RadialChart, ArcSeries, ArcLabel } from '@data-ui/radial-chart';
const colorScale = scaleOrdinal({ range: colors.categories });
const data = [{ label: 'a', value: 200 }, { label: 'c', value: 150 }, { label: 'c', value: 21 }];
export default () => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<RadialChart
ariaLabel="This is a radial-chart chart of..."
width={width}
height={height}
margin={{ top, right, bottom, left }}
renderTooltip={({ event, datum, data, fraction }) => (
<div>
<strong>{datum.label}</strong>
{datum.value} ({(fraction * 100).toFixed(2)}%)
</div>
)}
>
<ArcSeries
data={data}
pieValue={d => d.value}
fill={arc => colorScale(arc.data.label)}
stroke="#fff"
strokeWidth={1}
label{arc => `${(arc.data.value).toFixed(1)}%`}
labelComponent={<ArcLabel />}
innerRadius={radius => 0.35 * radius}
outerRadius={radius => 0.6 * radius}
labelRadius={radius => 0.75 * radius}
/>
</RadialChart>
<LegendOrdinal
direction="column"
scale={colorScale}
shape="rect"
fill={({ datum }) => colorScale(datum)}
labelFormat={label => label}
/>
</div>
);
工具提示
这个 简单 将工具提示从框中取出的方式是: renderTooltip 函数改为
<RadialChart />。此函数带有形状的对象 { event, datum, data, fraction }
作为输入并返回工具提示(而不是工具提示容器!)
见上文。 如果此函数返回 a falsy 值,将不提供工具提示.
盖子下面,这个包住 <RadialChart /> 导出部件 <WithTooltip />
HOC,它包起来 svg 在一个 <div /> 并处理基于 HTML 的定位和渲染
包含内容的工具提示 renderTooltip()。本工具提示意识到其界限
并应当“明智地”定位.
如果你想在工具提示的渲染上更自定义,你可以做以下任一工作:
-
滚动自己的工具提示定位逻辑并传递
onMouseMove财务报告和审定财务报表onMouseLeave函数到RadialChart。这些职能移交给<ArcSeries />孩子们,被召与 签名onMouseMove({ datum, event })财务报告和审定财务报表onMouseLeave()在适当的触发. -
环绕
<RadialChart />内<WithTooltip />自己,它接受道具 额外的 定制 :
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| 儿童 | PropTypes.func 或 propTypes.object | - 说吧 | 使用 MouseMove 、 MouseLeave 和工具tipData 道具/ 键的子函数(调用) 或元素( 克隆) |
| 类Name | PropTypes.string (英语) | - 说吧 | 要添加的类名 <div> 容器包装器 |
| 渲染工具提示 | PropTypes.func.is 必需 | - 说吧 | 显示 目录 工具提示,签名 ({ event, data, datum, fraction }) => node如果该函数返回 a falsy 值,将不提供工具提示. |
| 样式 | PropTypes.object 主题 | {} | 要添加的样式 <div> 容器包装器 |
| 工具提示组件 | PropTypes.func 或 propTypes.object | @vx是因为 TooltipWithBounds | 用作工具提示容器组件的组件(而非实例)。 它通过 top 财务报告和审定财务报表 left 定位数字 |
| 工具提示 | PropTypes.object 主题 | - 说吧 | 传递给 TooltipComponent |
| 工具提示超时 | PropTypes. 数 | 200个 | 调用时工具提示隐藏的超时 onMouseLeave |
请注意,目前以下列方式执行: @vx/tooltips是因为 withTooltip HOC, 增加了一个
额外 div包装.
路线图
- 更多类型的光圈系列
- 动画/ 过渡
笔记
虽然经常遇到馅饼和甜甜圈的图表,但并不是最多的 有效 用于传递定量信息的可视化. 有了这个戒备,他们就可以 有效地概括了人口构成,这是对人口构成的一种完全合理的利用 图表。 我们不建议使用 >7切片来表示用户的可读性.