React Charts

## 使用 ApexCharts 在 React.js 中创建图表
React-ApexCharts 是 ApexCharts 的包装器组件，可以集成到您的 react.js 应用程序中，以创建令人惊叹的 React 图表。在本文中，您将学习如何使用 React-ApexCharts 组件在您的 react.js 应用程序中轻松创建各种图表。

## 安装
从 npm 在 React 应用程序中安装 React-ApexCharts 组件

```shell
npm install --save react-apexcharts apexcharts
```

如果您需要直接在您的 html 中包含脚本，请使用以下 cdn 链接

```html
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/react-apexcharts"></script>
```
 
## Props
以下是可以传递给 React-ApexCharts 组件的基本属性

| Prop    | 描述                                                       | 类型             | 默认   |
|---------|-------------------------------------------------------------------|------------------|-----------|
| type    | 必须指定的图表类型               | String           | `'line'`    |
| series  | 您要在图表中显示的数据                   | Array            | `undefined` |
| width   | 图表的宽度                                                | String &#124;&#124; Number | `'100%'`    |
| height  | 图表的高度                                               | String &#124;&#124; Number | `'auto'`    |
| options | 图表的所有可选配置都在此属性中 | Object           | `{}`        |

## 用法
一旦你安装了这个库，你就可以在 react.js 中创建一个基本的条形图了。那么，让我们开始吧。

```javascript
import React, { Component } from "react";
import Chart from "react-apexcharts";

class App extends Component {
  constructor(props) {
    super(props);

this.state = {
      options: {
        chart: {
          id: "basic-bar"
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
        }
      },
      series: [
        {
          name: "series-1",
          data: [30, 40, 45, 50, 49, 60, 70, 91]
        }
      ]
    };
  }

render() {
    return (
      <div className="app">
        <div className="row">
          <div className="mixed-chart">
            <Chart
              options={this.state.options}
              series={this.state.series}
              type="bar"
              width="500"
            />
          </div>
        </div>
      </div>
    );
  }
}

export default App;
```

正如您在上面的模板中看到的，ApexCharts 组件包含 4 个 props。帖子底部详细描述了每个 prop。现在，让我们跳到 JavaScript 部分。在第一个示例中，我们将从一个非常基本的条形图开始。

```javascript
import React, { Component } from "react";
import Chart from "react-apexcharts";

class App extends Component {
  constructor(props) {
    super(props);

this.state = {
      options: {
        chart: {
          id: "basic-bar"
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
        }
      },
      series: [
        {
          name: "series-1",
          data: [30, 40, 45, 50, 49, 60, 70, 91]
        }
      ]
    };
  }

export default App;
```

这将呈现以下图表。要阅读有关您可以在条形图中配置的选项的更多信息，请查看此 [plotOptions.bar](http://www.bixiaguangnian.com/manual/apexcharts/315.html "plotOptions.bar") 配置。

![](/uploads/images/20221226/0126c7f5e501312fec02bc053ba24129.png)

接下来，我们创建一个简单的折线图。为此，只需更改type组件 props 中的属性

## 折线图

```html
  <Chart
    options={this.state.options}
    series={this.state.series}
    type="line"
    width="500"
  />
```

这将生成以下折线图。

![](/uploads/images/20221226/72db484cb2c62e48ee8ab68238cfeff6.png)

要详细了解您可以在折线图中配置的选项，请查看此 plotOptions.line 配置。现在，我们将创建一个具有最少配置的圆环图。为此，更改一些选项。

## 圆环图
与其他图表类型不同，圆环图接受一维序列数组。试试下面的代码。

```javascript
import React, { Component } from 'react';
import Chart from 'react-apexcharts'

class Donut extends Component {

constructor(props) {
    super(props);

this.state = {
      options: {},
      series: [44, 55, 41, 17, 15],
      labels: ['A', 'B', 'C', 'D', 'E']
    }
  }

render() {

return (
      <div className="donut">
        <Chart options={this.state.options} series={this.state.series} type="donut" width="380" />
      </div>
    );
  }
}

export default Donut;
```

这就是在上述代码的帮助下呈现的圆环图的样子。

![](/uploads/images/20221226/7f5c1f74962fb40268db3dde3b89aaae.png)

在下一节中，我们将看到如何动态更新呈现的图表。

## 更新 React 图表数据
更新 React 图表数据很简单。你只需要更新 series prop，它会自动触发事件来更新图表。我们将在下面看到一个用一些随机序列更新图表数据的例子来说明这一点。

```javascript
const newSeries = [];

this.state.series.map((s) => {
  const data = s.data.map(() => {
    return Math.floor(Math.random() * (180 - min + 1)) + min
  })
  newSeries.push({ data, name: s.name })
})

this.setState({
  series: newSeries
})
```
正如你在上面的例子中看到的，通过改变道具，我们触发了 ApexCharts 的更新事件。

[在 CodeSandbox 上编辑](https://codesandbox.io/s/mzzq3yqjqj "在 CodeSandbox 上编辑")

## 更多图表示例？
通过更改几个选项可以创建其他几个图表。主要配置必须在`optionsApexCharts` 组件的属性中完成，其余部分将落到位。

## 需要高级图表功能？
我们与 Infragistics 合作，允许您访问广泛的数据可视化库，为您的 Web 和移动应用程序提供令人惊叹的交互式[React 图表](https://www.infragistics.com/products/ignite-ui-react/react/components/charts/chart-overview "React 图表")。全面的 React 图表提供可自定义的功能，如动画、突出显示、注释、向下钻取、多层、工具提示等。所有这些都具有直观的 API、灵活的主题和品牌以及最少的代码即可开始使用！

我们知道您的 React 图表不应该只是提供快速的性能。它们应该包括您的用户需要的所有功能，提供让应用程序在竞争中保持领先地位的用户体验。借助 Ignite UI for React 图表，您可以创建富有表现力的仪表板、应用深度分析并在几秒钟内呈现数百万个数据点。浏览超过 65 种可自定义的 React 图表类型，看看哪一种最适合您的项目。包括常见的商业图表，如[饼图](https://www.infragistics.com/products/ignite-ui-react/react/components/charts/types/pie-chart "饼图")、折线图、柱形图、面积图，以及最需要的[财务图表](https://www.infragistics.com/products/ignite-ui-react/react/components/charts/types/stock-chart "财务图表")。