@data-ui/sparkline

A React + d3 library for creating sparklines ? implemented with vx.

npm install --save @data-ui/sparkline

Demo it live at williaster.github.io/data-ui.

Example usage

Sparklines are composable using the container <Sparkline /> component and different types of children including one or more <*Series /> components and reference lines or bands. Additionally, you can customize aesthetics using the exported <PatternLines /> and <LinearGradient/> components.

Note that the order of children passed to <Sparkline /> determines their rendering order, for example a <HorizontalReferenceLine /> passed after a <BarSeries /> will overlay the line on the bars.

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>

NPM：https://www.npmjs.com/package/@data-ui/sparkline?activeTab=readme

微型图实例：https://williaster.github.io/data-ui/?selectedKind=sparkline&selectedStory=Kitchen%20sink&full=0&addons=0&stories=1&panelRight=0

微型图源码：https://github.com/williaster/data-ui/blob/master/packages/demo/examples/03-sparkline/KitchenSinkExamples.jsx

转载于:https://my.oschina.net/u/2391658/blog/3074136