2019년 리액트 시각화 도서관

Cube.js을 처리할 때 우리는 많은 다른 시각화 라이브러리를 보았다.그 입방체를 감안하면js는 SQL 데이터베이스에서 분석을 위해 API층을 제공하여 시각화 분야에서 역할을 발휘하지 않고 모든 그래프 라이브러리에서 계기판을 구축할 수 있다.이것이 바로 우리가 항상 좋은 개발자의 우호적인 시각화 라이브러리를 찾고 있는 이유이다.
다음 목록은 특정 라이브러리에 대한 것입니다.나는 그 중 하나를 사용해서 거의 같은 축 형식, 도례, 도구 알림이 있는 겹쳐진 스트라이프 그림을 구축하려고 한다.데이터 백엔드에는 Cube가 사용됩니다.제이스가 히로쿠에서 진행을 맡고 있습니다.나는 또한 Cube.js React binding을 사용할 것이다. 이것은 render props 기술을 사용하여 그 자체로 어떤 내용도 과장하지 않고, 우리는 어떠한 도표 라이브러리로도 우리가 원하는 내용을 구축할 수 있다.
이 과정에서 나는 매우 편리한 두 개의 라이브러리인 moment.js과 numeral.js을 각각 날짜와 숫자 형식에 사용할 것이다.
데이터 입력으로 우리는 다차원 데이터가 집중된 resultSet.chartPivot() 방법을 사용할 것이다.js Javascript 클라이언트데이터 배열을 반환합니다. 예를 들면 다음과 같습니다.

[
  {
    "x": "2017-01-01T00:00:00.000",
    "completed, Orders.count": 208,
    "processing, Orders.count": 252,
    "shipped, Orders.count": 233
  },
  {
    "x": "2017-02-01T00:00:00.000",
    "completed, Orders.count": 188,
    "processing, Orders.count": 209,
    "shipped, Orders.count": 222
  },
  …
]

이제 목록으로 넘어갑시다.
만약 당신이 가장 좋아하는 라이브러리를 보지 못하거나, 단지 나에게 라이브러리를 하나 더 추가하고 싶다면, this Public Slack Community에서 나를 핑거하면 됩니다.목록에 가능한 한 많은 라이브러리를 추가할 수 있어서 기쁩니다.

레차츠
Recharts은 모듈화된 도표 구성 요소를 제공합니다. 이 구성 요소를 혼합하여 composed line and bar chart과 같은 구성 요소를 쉽게 구축할 수 있도록 합니다.
이것은 지금까지 가장 환영받은 도서관이다.깃허브에는 11k개가 넘는 별이 있지만 (지금까지 600개) 해결되지 않은 문제가 많다.
문서의 내용은 상당히 광범위하지만, 일부 부분에서는 세부 사항이 부족하다.너는 Rechart’s website에서 몇 가지 예를 찾을 수 있다. 이것은 자신의 도표를 구축하는 데 좋은 출발점이 될 수 있다.
Recharts에는 다양한 사용자 정의 옵션이 있습니다.또한 SVG 요소를 사용자화하여 낮은 수준의 사용자 정의를 수행할 수 있습니다.
다음은 Recharts에서 스태킹 막대 그림을 작성하는 방법입니다.
본 예와 아래의 모든 예에서 나는 colors, dateFormatter과 numberFormatter 변수를 사용했다.이러한 정의는 다음과 같습니다.

const numberFormatter = item => numeral(item).format("0,0");
const dateFormatter = item => moment(item).format("MMM YY");
const colors = ["#7DB3FF", "#49457B", "#FF7C78"];

export default ({ resultSet, colors, dateFormatter, numberFormatter }) => (
  <ResponsiveContainer width="100%" height={300}>
    <BarChart data={resultSet.chartPivot()}>
      <XAxis tickFormatter={dateFormatter} dataKey="x" />
      <YAxis tickFormatter={numberFormatter} />
      {resultSet.seriesNames().map((series, i) => (
        <Bar
          stackId="a"
          dataKey={series}
          name={series.split(",")[0]}
          fill={colors[i]}
        />
      ))}
      <Legend />
      <Tooltip labelFormatter={dateFormatter} formatter={numberFormatter} />
    </BarChart>
  </ResponsiveContainer>
);

승리를 거두다
Victory은 Recharts와 동일한 조합 모드를 따릅니다.그것은 Formidable에서 개발한 것으로, Victory를 제외하고는 다른 믿을 만한 소스 라이브러리도 있다.React Native 에 적용되는 라이브러리는 목록에서 유일합니다.
리카츠에 이어 두 번째로 인기 있는 도서관으로 깃허브에 7K개가 넘는 별을 보유하고 있지만 공개된 도서는 리카츠보다 5배 적다.승리호는 community chat on Spectrum이다.
그것은 well documented이고, 하나는 examples gallery이다.
Victory에는 두 가지 테마가 있습니다. 그레이스케일과 재료입니다. 모든 도표에서 일치하는 외관을 유지하기 위해 고객 테마를 만들 수 있습니다.
다음은 우리의 승리 퇴적 조형도 코드를 볼 수 있습니다.

const transformResult = (series, resultSet) =>
  resultSet.chartPivot().map(element => ({ x: element.x, y: element[series] }));

export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (
  <div height={300}>
    <VictoryChart
      containerComponent={
        <VictoryVoronoiContainer
          voronoiDimension="x"
          labels={(d, i) => `${resultSet.seriesNames()[i]}: ${d.y}`}
          labelComponent={
            <VictoryTooltip cornerRadius={0} flyoutStyle={{ fill: "white" }} />
          }
        />
      }
      domainPadding={{ x: 20, y: [0, 20] }}
    >
      <VictoryLegend
        colorScale={colors}
        data={resultSet.seriesNames().map(series => ({
          name: series.split(",")[0]
        }))}
        orientation="horizontal"
        y={275}
        x={130}
      />
      <VictoryAxis tickFormat={dateFormatter} tickCount={8} />
      <VictoryAxis dependentAxis />
      <VictoryStack colorScale={colors}>
        {resultSet.seriesNames().map((series, i) => (
          <VictoryBar key={i} data={transformResult(series, resultSet)} />
        ))}
      </VictoryStack>
    </VictoryChart>
  </div>
);

니보
Recharts와 Victory를 제외하고 Nivo도 D3 위에 세워졌으며 React에 특정되어 있다.그러나 이전의 라이브러리와 달리 조합할 수 없습니다.이것은 모든 그래프 형식에 하나의 구성 요소를 제공합니다. 이 구성 요소는 여러 개의 도구를 통해 설정됩니다.Nivo는 @nivo/bar과 같은 특정 차트 유형의 패키지로 배포됩니다.따라서 특정 차트 유형을 사용하려면 특정 소프트웨어 패키지를 설치해야 합니다.
프로젝트 자체가 상당히 활발하다.Github에는 5k개가 넘는 별이 있고 community chat에는 300명에 가까운 멤버가 있다.
이것은 상호작용 문서가 있는데, 그 중에서 도표를 구성할 수 있습니다.좋기는 하지만 좋은 이전 텍스트 API 참조 및 검색 옵션이 없습니다.Storybook with examples이 하나 더 있습니다.그것은 내가 첫 번째 도표를 만드는 시간을 단축시키는 데 도움을 주었다.Victory와 마찬가지로, Nivo는 모든 그래프에서 일치하는 테마를 만들 수 있도록 합니다.
우리는 @nivo/bar 소프트웨어 패키지를 사용하여 창고 조형도를 만들 것이다.코드 예제 및 CodeSandbox 데모를 찾을 수 있습니다.

//https://github.com/plouc/nivo/issues/138#issuecomment-373015114
const ticksFormmater = (ticksCount, value, data, dateFormatter) => {
  const valueIndex = data.map(i => i.x).indexOf(value);
  if (valueIndex % Math.floor(data.length / ticksCount) === 0) {
    return dateFormatter(value);
  }

  return "";
};

export default ({ resultSet, colors, dateFormatter, numberFormatter }) => (
  <div style={{ height: 300 }}>
    <ResponsiveBar
      enableLabel={false}
      colors={colors}
      data={resultSet.chartPivot()}
      keys={resultSet.seriesNames()}
      indexBy="x"
      enableGridY={false}
      padding={0.3}
      margin={{ top: 60, right: 80, bottom: 60, left: 40 }}
      axisLeft={{
        format: numberFormatter
      }}
      axisBottom={{
        format: value =>
          ticksFormmater(8, value, resultSet.chartPivot(), dateFormatter)
      }}
      tooltip={({ id, value, color }) => (
        <strong style={{ color }}>
          {id.split(",")[0]}: {numberFormatter(value)}
        </strong>
      )}
      legends={[
        {
          anchor: "bottom",
          direction: "row",
          translateY: 50,
          itemsSpacing: 2,
          itemWidth: 150,
          itemHeight: 20,
          itemDirection: "left-to-right"
        }
      ]}
    />
  </div>
);

상업 도표
BizCharts은 시각화 문법 G2을 바탕으로 하는React에 특정된 시각화 라이브러리이다.알리바바의 지원을 받아 개미 디자인 프레임과 잘 어울린다.
그것은 Github에 4k에 가까운 별을 가지고 있지만, 대부분의 개발은 중국어이고, 대부분의 문서도 마찬가지다.나는 팀이 문서를 번역하는 방면에서 매우 잘했다고 생각하지만, 여전히 진행 중이다.
영어 문서가 부족하지만 API는 매우 간단합니다.유일하게 어려운 것은 데이터를 겹쳐진 도표의 특정 형식으로 다시 포맷하는 것이다.

const stackedChartData = resultSet => {
  const data = resultSet
    .pivot()
    .map(({ xValues, yValuesArray }) =>
      yValuesArray.map(([yValues, m]) => ({
        x: resultSet.axisValuesString(xValues, ", "),
        color: resultSet.axisValuesString(yValues, ", "),
        measure: m && Number.parseFloat(m)
      }))
    )
    .reduce((a, b) => a.concat(b));

  return data;
};

export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (
      <Chart
        scale={{ x: { tickCount: 10 } }}
        height={400}
        data={stackedChartData(resultSet)}
        forceFit
      >
        <Axis name="x" label={{ formatter: dateFormatter }} />
        <Axis label={{ formatter: numberFormatter }} name="measure" />
        <Tooltip />
        <Geom
          type="intervalStack"
          position={`x*measure`}
          color={["color", colors]}
        />
        <Legend itemFormatter={item => item.split(",")[0]} />
      </Chart>
    )}
  />
);

리액션
우버는 React-vis을 개발 중이며 활발한 움직임을 보이고 있다. 5.4k Github 스타, 150기 공개 발매, 그리고 최근의 제출이 많다.목록의 대다수 라이브러리처럼 모듈화되어 있습니다.CSS 파일로 별도로 가져올 수 있는 괜찮은 기본 스타일이 포함되어 있습니다.
니보와 마찬가지로 이야기책과 예도 있다.어셈블리 API에도 좋은 문서 기록이 있습니다.CSS 스타일을 사용자 정의하여 모양새를 제어할 수 있습니다.React vis는 사용자 정의 SVG 차트를 구축하는 데 사용되는 특정 구성 요소인 CustomSVGSeries도 제공합니다.
API는 Victory와 유사합니다. 제가 사용하는 것은 거의 Victory 코드 세션의 transformResult과 같습니다.

const transformResult = (series, resultSet, dateFormatter) =>
  resultSet
    .chartPivot()
    .map(element => ({ x: Date.parse(element.x), y: element[series] }));

export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (
  <XYPlot xType="time" height={300} width={500} stackBy="y">
    <XAxis tickFormat={dateFormatter} tickSize={8} />
    <YAxis />
    {resultSet.seriesNames().map((series, i) => (
      <VerticalBarSeries
        cluster="stack 1"
        key={i}
        color={colors[i]}
        data={transformResult(series, resultSet, dateFormatter)}
      />
    ))}
    <DiscreteColorLegend
      colors={colors}
      items={resultSet.seriesNames().map(i => i.split(",")[0])}
      orientation="horizontal"
      style={{ position: "absolute", left: 130, bottom: -30 }}
    />
  </XYPlot>
);

만약 당신이 가장 좋아하는 라이브러리를 보지 못하거나, 단지 나에게 라이브러리를 하나 더 추가하고 싶다면, this Public Slack Community에서 나를 핑거하면 됩니다.목록에 가능한 한 많은 라이브러리를 추가할 수 있어서 기쁩니다.