当前位置：首页 > news >正文

如何使用 React 101 的 Highcharts 包装器

news 2025/8/19 12:26:22

新的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/ ）