登陆

极彩域名测试-2019 年值得引荐的 React 可视化库

admin 2019-05-31 307人围观 ,发现0个评论


最近咱们在开发Cube.js时,调研了许多不同的可视化库。Cube.js 在兼容 SQL 语法的数据库之上构建用于剖析的 API 层,因而任何图表库均能够和 Cube.js 一同用来构建仪表板。这便是为什么咱们一直在寻觅一个优质并且关于开发者更友爱的可视化库。

以下的列表仅针对 React 专用库。我会测验运用坐标轴、图例和东西提示来构建简直如出一辙的堆叠式的条形图。在数据后端方面,咱们将运用 Heroku 保管的 Cube.js。我还会运用Cube.js 的 React 组件,它运用了render props技能,并且它只烘托自己,所以咱们能经过任何图表库构建咱们想要的任何东西。

在此期间,我还会运用 2 个十分好用的库,别离是 moment.js 和 numeral.js,它们别离用于日期和数字的格局化。

作为数据输入,咱们还会运用来自 Cube.js Javascript 客户端的https://cube.dev/docs/@cubejs-client-core \l result-set-chart-pivot \t _blank">resultSet.chartPivot() 办法。它会回来一个数据数列,在咱们的比方傍边,它长这样:

[
{
"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
},

]

现在,让咱们转向列表。

假如你没有发现你中意的库,或许想让我再增加一个库,请在这个 Slack 频道 ping 我。我十分乐意在列表中增加更多的库:

https://cubejs-community.herokuapp.com/

Recharts

http://recharts.org/

Recharts 供给了一组模块化的图表组件,并且能够让你将这些组件进行组合,然后轻易地构建许多东西,比方曲线条形组合图。

它是我列出这几个里边最受欢迎的库。它在 Github 上有超越 11000 颗星,但一起也有许多的敞开的 issue(迄今为止为 600 个)。

它的文档十分全面,但缺少某些方面的细节。你能够在 Rechart’s 网站上 (http://recharts.org/) 找到一些比方,然后依据它们开端构建你自己的图表。

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 }) => (




{resultSet.seriesNames().map((series, i) => (

stackId="a"
dataKey={series}
name={series.split(",")[0]}
fill={colors[i]}
/>
))}




);

Demo 见:

https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/recharts

Victory

https://formidable.com/open-source/victory/

Victory 运用了和 Recharts 相同的组合方法。

它是由Formidable开发的极彩域名测试-2019 年值得引荐的 React 可视化库。除了 Victory 外,Formidable 还具有其它牢靠的开源库。它是列表中仅有一个能够兼容 React Native 的库。

Victory 是仅次于 Recharts 的第二受欢迎的库,在 Github 上有 7000 颗星,可是它的敞开的 issue 仅仅 Recharts 的五分之一。Victory 在Spectrum 上有一个社区谈天群。

它的文档化杰出并且有一个示例陈列馆。

Victory 供给了 2 个款式风格:灰度和 Material,并且能让你创立客户主题,然后使一切图表的外观保持一致。 下面,你能够看到咱们堆叠式的条形图在 Victory 里边的代码。


const transformResult = (series, resultSet) =>
resultSet.chartPivot().map(element => ({ x: element.x, y: element[series] }));
export default ({ result极彩域名测试-2019 年值得引荐的 React 可视化库Set, dateFormatter, colors, numberFormatter }) => (


containerComponent={

voronoiDimension="x"
labels={(d, i) => `${resultSet.seriesNames()[i]}: ${d.y}`}
labelComponent={

}
/>
}
domainPadding={{ x: 20, y: [0, 20] }}
>

colorScale={colors}
data={re美名腾sultSet.seriesNames().map(series => ({
name: series.split(",")[0]
}))}
orientation="horizontal"
y={275}
x={130}
/>



{resultSet.seriesNames().map((series, i) => (

))}



);

Demo 见:

https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/victory

Nivo

https://nivo.rocks/

同 Recharts 和 Victory 相同,Nivo 依据 D3 并且是 React 特有的。但与前面的库不同的是,它不支撑图表组合。每个图表类型仅供给了一个组件,并且这个组件是经过多个 props 来装备的。Nivo 是针对特极彩域名测试-2019 年值得引荐的 React 可视化库定的图表类型如 @nivo/bar 的一套程序包。所以,你需求装置特定的程序包,才干运用特定的图表类型。

该项目自身十分活泼。它在 Github 上有 5000 颗星,在社区谈天群中有 300 名成员。

它的文档十分互动化,你能够依据文档构建图表的装备。尽管它很好,可是它缺少一个纯文本方法的 API 参阅和查找功用。此外,它还有一个带有示例的Storybook。它大大地缩减了我创立第一张表的时刻。同 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 }) => (


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 }) => (

{id.split(",")[0]}: {numberFormatter(value)}

)}
legends={[
{
anchor: "bottom",
direction: "row",
translateY: 50,
itemsSpacing: 2,
itemWidth: 150,
itemHeight: 20,
itemDirection: "left-to-right"
}
]}
/>

);

Demo 见:

https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/nivo

BizCharts

https://bizcharts.net/products/bizCharts

BizCharts 是一个依据G2的 React 特有的可视化库,G2 是一种可视化语法。BizCharts 由阿里巴巴支撑,并且能够和 Ant Design 结构杰出合作。

它在 Github 上约有 4000 颗星,可是大部分的开发仍是中文的,其文档也是如此。据我所知,该团队正在翻译这些文档,可是仍未完结一切的翻译。

尽管它短缺英文文档,可是其 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 }) => (

scale={{ x: { tickCount: 10 } }}
height={400}
data={stackedChartData(resultSet)}
forceFit
>




type="intervalStack"
position={`x*measure`}
color={["color", colors]}
/>
item.split(",")[0]} />

)}
/>
);

Demo 见:

https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/bizcharts

React-vis

https://uber.github.io/react-vis/

React-vis 是由 Uber 开发的,并且现在在 Github 上有 5400 颗星、150 个敞开的 issue,最近也有许多提交,因而它好像十分活泼。它是模块化的,这点同列表中的大多数库相同。它还有许多十分棒的默许风格,这些风格有必要独自以 CSS 文件的方法导入。

同 Nivo 相同,React-vis 也有带有示例的故事簿。其组件 API 的文档化也十分好。在定制方面,你能够经过定制的 CSS 风格来操控其外观和给人的感觉。React-vis 还供给了一个特其他组件即 CustomSVGSeries来构建定制的 SVG 图表。

其 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 }) => (



{resultSet.seriesNames().map((series, i) => (

cluster="stack 1"
key={i}
color={colors[i]}
data={transformResult(series, resultSet, dateFormatter)}
/>
))}

colors={colors}
items={resultSet.seriesNames().map(i => i.split(",")[0])}
orientation="horizontal"
style={{ position: "absolute", left: 130, bottom: -30 }}
/>

);

Demo 见:

https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/react-vis

检查英文原文:https://blog.statsbot.co/react-visualization-libraries-in-2019-91be49a01158

你喜爱的 React 可视化库是哪个呢?欢迎留言共享。

引荐阅览

浅谈 Node.js 在携程的使用

检查文章,欢迎点击了解更多

请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP