在 React 中使用 Highcharts

Highcharts是一个用JavaScript编写的图表库,可以方便地在WEB页面或WEB应用程序中创建图表。其使用方法也很简单,引入highcharts库文件,然后根据API文档配置即可。那么在React中怎么使用呢?

在Highcharts的官方博客里也给出里使用方法,具体我们可以来看一下下面的代码:

首先是页面结构,我们需要引入React、Highchats、babel等库文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在React中使用Highcharts</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.5/highcharts.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel" src="./main.js"></script>
</body>
</html>

注意:引入main.js的script标签的type属性为text/babel,方便babel编译。

然后就是main.js的具体实现了,写法并不由什么特别之处,唯一需要留意的就是Highcharts.chart(element, options)方法,我们通过这个方法来创建图表。

JS部分代码如下:

var options = {/*具体配置项省略...*/};
var Chart = React.createClass({
componentDidMount: function () {
Highcharts.chart(this.refs.chart, this.props.options);
},

render: function () {
return (
<div ref="chart"></div>
);
}
});

ReactDOM.render(
<Chart options={options}/>,
document.getElementById('app')
);

OK,这个时候我们图表就可以显示出来了,实现了在React中的使用。

当然,实际应用中,我们应该把使用jsx语法的文件在服务器端编译后再引入浏览器,以提高页面的加载效率。

如果使用的是ES6语法的话,还可以尝试下使用hicharts这个模块,具体使用方法如下:

安装hicharts模块及相关的依赖包:

npm install hicharts react react-dom highcharts --save

代码示例:

import React from 'react';
import ReactDOM from 'react-dom';
import Hicharts from 'hicharts';

const options = {
// highcharts options
};

ReactDOM.render(
<Hicharts options={options}/>,
document.getElementById('chart')
);

如果图表是根据不同的options动态变化的,那么只需要用state管理options即可,配置项改变时图表也跟着变化。

示例源码