@ data- ui/ sparkline (中文(简体) )

用于创建花花线的 React + d3 库 ưμ㼯a。 。 。 .

npm install --save @data-ui/sparkline

拆解它住在这里 (原始内容存档于2017-10-21). williaster.github.io/data-ui。 。 。 .

示例用途

火花线可以使用容器来堆肥 <Sparkline /> 儿童,包括一名或多名儿童 <*Series /> 组件和参考行或带。 此外,您还可以使用导出的自定义美学 <PatternLines /> 财务报告和审定财务报表 <LinearGradient/> 组件.

请注意,儿童的顺序是: <Sparkline /> 确定它们的渲染顺序, 例如 a <HorizontalReferenceLine /> 在一个之后通过 <BarSeries /> {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}我会在栏杆上铺线.

import {
  Sparkline,
  LineSeries,
  HorizontalReferenceLine,
  BandLine,
  PatternLines,
  PointSeries } from '@data-ui/sparkline';
import { allColors } from '@data-ui/theme'; // open-color colors

const data = Array(25).fill().map(Math.random);

<Sparkline
      ariaLabel="A line graph of randomly-generated data"
      margin={{ top: 24, right: 64, bottom: 24, left: 64,}}
      width={500}
      height={100}
      data={data}
      valueAccessor={datum => datum}
    >
      {/* this creates a <defs> referenced for fill */}
      <PatternLines
        id="unique_pattern_id"
        height={6}
        width={6}
        stroke={allColors.grape[6]}
        strokeWidth={1}
        orientation={['diagonal']}
      />
      {/* display innerquartiles of the data */}
      <BandLine
        band="innerquartiles"
        fill="url(#unique_pattern_id)"
      />
      {/* display the median */}
      <HorizontalReferenceLine
        stroke={allColors.grape[8]}
        strokeWidth={1}
        strokeDasharray="4 4"
        reference="median"
      />
      {/* Series children are passed the data from the parent Sparkline */}
      <LineSeries
        showArea={false}
        stroke={allColors.grape[7]}
      />
      <PointSeries
        points={['min', 'max']}
        fill={allColors.grape[3]}
        size={5}
        stroke="#fff"
        renderLabel={val => val.toFixed(2)}
      />
    </Sparkline>

构成部分

检查故事本中的示例源代码和PropTable标签 (原始内容存档于2017-10-21). williaster.github.io/data-ui 为了更多!

<Sparkline />

这个 Sparkline 组件生成 <svg /> 并协调所有的儿童系列和参考线的尺度。 它需要下列道具: It道具:

系列

下列系列组件可供使用,它们从母公司传递数据和尺度 Sparkline 组件,您可以组成多个来创建您想要的闪光线 :

• <LineSeries />
• <PointSeries />
• <BarSeries />

<PointSeries /> 财务报告和审定财务报表 <BarSeries /> 支持特定数据点的标签.

<LineSeries />

此组件可用于创建线条和或区域有各种闪光线 curve 类型,并选择以下道具:

<BarSeries />

此组件可用于条形图火花并取出以下道具:

<PointSeries />

此组件可用于制取所有或子集点来取出火花并取出以下道具:

工具提示

您可以添加工具提示到 <Sparkline /> 用高顺序来包装组件 <WithTooltip /> 组件。 此组件接受 a renderTooltip 函数,其输出将导出为边界认识(以html为基础的)工具提示. <WithTooltip /> 处理工具提示能见度状态和通过 onMouseMove onMouseLeave 财务报告和审定财务报表 tooltipData 为其子道具. 如果这些传到 <Sparkline />,它将使一系列隐形 Bars用于拦截鼠标事件. 如果它们被传递到单个序列,鼠标事件将在序列级别上处理.

见 故事书 比如说用法!

参考行和频段

以下引用行组件导出以支持您可能想要的不同类型的注释 :

• <HorizontalReferenceLine />
• <VerticalReferenceLine />
• <BandLine />。 。 。 .

<HorizontalReferenceLine />

此组件可用于使单一的横向参照线呼出一个切入点. 它需要以下道具: It

<VerticalReferenceLine />

@ TODO 图片

此组件可用于使单一的垂直参照线呼出一个切入点. 它需要以下道具: It

<BandLine />

此组件可用于制取 范围 相对于单一价值。 它可能用于创建垂直或水平带并取出以下道具:

<PatternLines /> 财务报告和审定财务报表 <LinearGradient/>编号

为方便起见,这些部件从 @vx 支持定制你的花纹的美学。 他们创造 <defs/> 包含指定的元素 id,然后通过 url(#my_id)。见上文示例和 故事书 举个例子!

他们采取以下道具:

<PatternLines />

<LinearGradient />