Highcharts React、Angular 官方扩展包发布

为了方便用户在不同的框架中使用 Highcharts，我们针对目前市面上最流行的前端框架 React、Angular 进行封装并正式对外发布。

Highcharts React 扩展包

项目地址：https://github.com/highcharts/highcharts-react

使用方法：

安装

通过 npm 或 yarn 从 github 上下载 highcharts react 包，命令是

npm install highcharts/highcharts-react highcharts react react-dom

使用

1、基础使用示例：

与 react 一起引入并渲染基础图表

import React from 'react'
import { render } from 'react-dom'
import Highcharts from 'highcharts/highstock'
import HighchartsReact from 'highcharts-react'

const options = {
  title: {
    text: 'My stock chart'
  },
  series: [{
    data: [1, 2, 3]
  }]
}

const App = () => <div>
  <HighchartsReact
    highcharts={Highcharts}
    constructorType={'stockChart'}
    options={options}
  />
</div>

render(<App />, document.getElementById('root'))

2、自定义组件示例：

创建自定义组件，例如 ./components/MyStockChart.jsx

import React from 'react'
import Highcharts from 'highcharts/highstock'
import HighchartsReact from 'highcharts-react'

const options = {
  title: {
    text: 'My stock chart'
  },
  series: [{
    data: [1, 2, 3]
  }]
}

const MyStockChart = () => <HighchartsReact
  highcharts={Highcharts}
  constructorType={'stockChart'}
  options={options}
/>

export default MyStockChart

使用这个自定义组件

import React from 'react'
import { render } from 'react-dom'
import MyStockChart from './components/MyStockChart.jsx'

const App = () => <div>
  <MyStockChart />
</div>

render(<App />, document.getElementById('root'))

更多详情请参考：https://github.com/highcharts/highcharts-react

相关内容：在 React 及 Webpack 中使用 Highcharts