如何使用 React 101 的 Highcharts 包装器
新的React 的 Highcharts 包装器现已推出，并且兼容React 16.4+。
在本教程中，我们将向您展示如何开始使用官方React 的 Highcharts 包装器。
我们将从设置环境开始，然后跳转到为每个 Highcharts 库创建三个演示：Highcharts、Highstock 和 Highmaps。
设置环境
对于这个项目，我们将使用：
创建 React 应用
工具只关注代码并获取 Webpack 和 Babel 的预配置。Visual Studio 代码
作为主要编辑器，享受其强大的功能，让编写代码变得更容易。- 扩展
简单的 React 代码片段
帮助编写快速的 React 代码。 - 扩展
Prettier
更好地重新格式化代码。
安装
由于我们经常使用 Create React App 工具，因此我们倾向于全局安装它。为此，请打开终端并运行以下命令行，并使用选项-g对于全局：
$npm install-g create-react-app
创建我们的应用程序“hcreact”，在终端窗口输入：
$create-react-app hcreact
上面的命令行会创建一个包含默认项目的文件夹。
要安装 Visual Studio 代码和扩展，请随意参考官方文档。
安装 Visual Studio Code 后，打开它，将文件夹拖放到“hcreact”进入编辑器。
在开始更改项目之前，让我们按原样运行该项目，以确保一切都已设置好。
返回终端运行这些命令行：
$ cd hcreact/$ npm start
npm start 将在端口 3000 上启动服务器。
如果您的结果如下图所示，则表示基本配置正在正常工作。
接下来安装 Highcharts 和 Highcharts React Wrapper。
首先，使用以下命令在终端上停止正在运行的项目Ctrl+c，然后运行此命令行：
$ npm install highcharts$ npm install highcharts-react-official
现在，让我们通过删除默认文件来准备我们的项目。返回编辑器然后删除以下文件：
- 应用程序.css
- App.js
- 应用程序.测试.js
- index.js
- 索引.css
- 徽标.svg
- serviceWorker.js
- .gitignore
解决了这个问题，我们就可以开始编写自己的代码了。
HIGHCHARTS 图表
在 src 文件夹中，创建 index.js，打开并导入react，react-dom，highcharts， 和highcharts-react-official。
import React from 'react';
import { render } from 'react-dom';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';首先要生成的简单图表是具有以下内容的样条图data:[1,2,1,4,3,6]为了实现这一点，我们需要创建一个对象（选项），然后传递信息：
const options = {chart: {type: 'spline'},title: {text: 'My chart'},series: [{data: [1, 2, 1, 4, 3, 6]}]
};JSX 包含上面创建的信息，具体操作方法如下：
const App = () => (<div><HighchartsReact highcharts={Highcharts} options={options} /></div>
);最后使用react render方法渲染整个代码：
render(<App />, document.getElementById('root'));所需代码现已完成。返回终端并运行项目：
$ npm start
结果应该是一个交互式样条图：
（浏览器演示地址 https://zn1j00v1wx.csb.app/）
HIGHSTOCK 图表
使用 Highstock 库生成的图表也适用相同的过程。
以下是一个简单的交互式股票图表的示例：
import React from 'react';
import { render } from 'react-dom';
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';const options = {title: {text: 'My stock chart'},series: [{data: [1, 2, 1, 4, 3, 6, 7, 3, 8, 6, 9]}]
};const App = () => (<div><HighchartsReacthighcharts={Highcharts}constructorType={'stockChart'}options={options}/></div>
);render(<App />, document.getElementById('root'));注意使用此导入来导入 HighstockimportHighchartsfrom'highcharts/highstock';，并使用constructorType={'stockChart'}在里面JSX。
结果如下的演示：
（浏览器演示地址 https://jzjzr57jw.csb.app/）
Highmaps图
使用 Highmaps 渲染地图的过程与之前的演示几乎类似，除了几点：
- 我们必须导入要显示的地图数据并将其保存为mapDataAsia.js，就我而言
亚洲的 JavaScript 地图
来自Highcharts 地图集合。
- 替换对象Highcharts.maps["custom/asia"] 经过
constmapDataAsia。 - 导出对象 exportdefaultmapDataAsia;
- 在我的 index.js使用 importmapDataAsiafrom'./mapDataAsia.js';
瞧，我们已经准备好使用地图并显示它了。
index.js 将如下所示：
import React from 'react';
import { render } from 'react-dom';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import mapDataAsia from './mapDataAsia';// Load Highcharts modules
require('highcharts/modules/map')(Highcharts);var data = [['ae', 37],['af', 44],['am', 20],['az', 19],['bd', 9],['bh', 12],['bn', 43],['bt', 26],['cn', 70],['cnm', 33],['cy', 48],['ge', 27],['id', 65],['il', 29],['in', 65],['iq', 36],['ir', 70],['jk', 40],['jo', 31],['jp', 100],['kg', 52],['kh', 25],['kp', 45],['kr', 70],['kw', 35],['kz', 28],['la', 38],['lb', 46],['lk', 51],['mm', 13],['mn', 34],['my', 18],['nc', 47],['np', 50],['om', 5],['ph', 1],['pk', 39],['qa', 41],['ru', 70],['sa', 2],['sg', 65],['sh', 17],['sp', 10],['sy', 30],['th', 4],['tj', 22],['tl', 24],['tm', 32],['tr', 65],['tw', 49],['uz', 23],['vn', 21],['ye', 6]
];const mapOptions = {title: {text: ''},colorAxis: {min: 0,stops: [[0.4, '#ffff00'], [0.65, '#bfff00'], [1, ' #40ff00']]},series: [{mapData: mapDataAsia,name: 'Asia',data: data}]
};// Render app with demo chart
class App extends React.Component {render() {return (<div><h1>Demos</h1><h2>Highmaps</h2><HighchartsReactoptions={mapOptions}constructorType={'mapChart'}highcharts={Highcharts}/></div>);}
}
render(<App />, document.getElementById('root'));最终结果是下面的演示：
（浏览器演示地址 https://v318454060.csb.app/ ）
现在，您知道如何使用 Highcharts React 包装器来使用三个主要 Highcharts 库创建和显示图表