react chart_适用于您的Web项目的7个React Chart库

最新推荐文章于 2024-08-13 08:03:31 发布

weixin_26750481

最新推荐文章于 2024-08-13 08:03:31 发布

阅读量3.1k

点赞数

文章标签： java python web vue ViewUI

原文链接：https://medium.com/better-programming/7-react-chart-libraries-for-your-web-projects-6bfe3b4652fd

版权

本文推荐了7个适用于Web项目的React图表库，包括但不限于数据可视化、交互式图表组件，帮助开发者实现丰富的数据展示效果。

摘要由CSDN通过智能技术生成

react chart

Web developers usually have a very deep relationship with graphs and charts. After all, when working on a project we have to find a way to retrieve data from the database and display it in a meaningful way.

Web开发人员通常与图形和图表有着非常深厚的关系。毕竟，在进行项目时，我们必须找到一种从数据库检索数据并以有意义的方式显示数据的方法。

Most of the time, you see the beautiful graphs in the admin dashboard of an application. Honestly, admins and website owners really need to see the visuals (big picture) of how their app is performing.

大多数时候，您会在应用程序的管理控制台中看到漂亮的图形。老实说，管理员和网站所有者确实需要查看其应用程序效果的视觉效果(大图)。

I’ve compiled a list of the best open-source React chart libraries that you can easily integrate into your web projects. I’ve also provided a bar chart example for each library, so you can quickly compare them to select the best one for your project.

我已经列出了最好的开源React图表库的列表，您可以轻松地将它们集成到Web项目中。我还为每个库提供了一个条形图示例，因此您可以快速比较它们以为您的项目选择最佳的。

The major benefit of using an existing data visualization library is that you don’t have to re-invent the wheel. This means you can focus on producing the actual data and leave the heavy-lifting of designing the graphs and charts to the library.

使用现有数据可视化库的主要好处是您不必重新发明轮子。这意味着您可以专注于生成实际数据，而将设计图形和图表的繁重工作留给库。

Without any further ado, let’s take a look at charting libraries for React.

事不宜迟，让我们来查看React的图表库。

图表 (Recharts)

Recharts has no match when it comes to community size and the number of contributors actively maintaining this cool library. It’s a data visualization library that combines the power of React and D3.js.

Recharts在社区规模和积极维护这个很棒的库的贡献者数量方面无与伦比。这是一个数据可视化库，结合了React和D3.js的功能。

It’s specifically designed to help you add graphs and charts to your React-based web applications.

它是专门为帮助您将图形和图表添加到基于React的Web应用程序而设计的。

The major advantage of Recharts is that it fully supports SVG (Scalable Vector Graphics). This means that you can get pixel-perfect graphs with a very small footprint.

Recharts的主要优点是它完全支持SVG(可缩放矢量图形)。这意味着您可以获得占用空间非常小的像素完美图形。

使用图表的条形图 (Bar chart using Recharts)

import React, { PureComponent } from 'react';
import {
       
  BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts';const data = [
  {
       
    name: 'Page A', uv: 4000, pv: 2400, amt: 2400,
  },
  {
       
    name: 'Page B', uv: 3000, pv: 1398, amt: 2210,
  },
  {
       
    name: 'Page C', uv: 2000, pv: 9800, amt: 2290,
  },
  {
       
    name: 'Page D', uv: 2780, pv: 3908, amt: 2000,
  },
  {
       
    name: 'Page E', uv: 1890, pv: 4800, amt: 2181,
  },
  {
       
    name: 'Page F', uv: 2390, pv: 3800, amt: 2500,
  },
  {
       
    name: 'Page G', uv: 3490, pv: 4300, amt: 2100,
  },
];export default class Example extends PureComponent {
       
  static jsfiddleUrl = 'https://jsfiddle.net/alidingling/30763kr7/';  render() {
       
    return (
      <BarChart
        width={500}
        height={300}
        data={data}
        margin={
       {
       
          top: 5, right: 30, left: 20, bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="pv" fill="#8884d8" />
        <Bar dataKey="uv" fill="#82ca9d" />
      </BarChart>
    );
  }
}