如何安装

1. 创建一个 package.json 包含 react, (中文(简体) ), react-dom,以及 @amcharts/amcharts3-react数字 :

   {
     "devDependencies": {
       "react": "^16.0.0",
       "react-dom": "^16.0.0",
       "@amcharts/amcharts3-react": "^3.0.0"
     }
   }
   

2. 运行 npm install

3. 使用 <script> 在 HTML 文件内加载安图的标记 :

   <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
   <script src="https://www.amcharts.com/lib/3/serial.js"></script>
   <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
   

4. 如果你使用捆绑器( 如 网络软件包,导入 @amcharts/amcharts3-react 插件 :

   import AmCharts from "@amcharts/amcharts3-react";
   

   ---

   使用时 <script> 标记,包括反应和 amcharts3-react.js hTML 中的文件 :

   <script src="node_modules/react/umd/react.production.min.js"></script>
   <script src="node_modules/react-dom/umd/react-dom.production.min.js"></script>
   <script src="node_modules/create-react-class/create-react-class.min.js"></script>
   <script src="node_modules/@amcharts/amcharts3-react/amcharts3-react.js"></script>
   

如何使用

React.createElement(AmCharts.React, {
  className: "my-class",
  style: {
    width: "100%",
    height: "500px"
  },
  options: {
    "type": "serial",
    "theme": "light",
    "graphs": [...],
    "dataProvider": [...]
  }
})

或者如果你使用JSX:

<AmCharts.React
  className="my-class"
  style={{
    width: "100%",
    height: "500px"
  }}
  options={{
    "type": "serial",
    "theme": "light",
    "graphs": [...],
    "dataProvider": [...]
  }} />

您也可以单独定义选项对象 :

var config = {
  "type": "serial",
  "theme": "light",
  "graphs": [...],
  "dataProvider": [...]
};

<AmCharts.React options={config} />

这个 options 属性支持与配置完全相同的 AmCharts.makeChart 方法,所以所有 图表演示 一样的工作.

变动至 options 在渲染时自动被检测( 您这样做 ) 没有 需要打电话 validateNow 或者说 validateData) (中文(简体) ).

此外,此插件自动生成一个 id,因此无需指定.

您可以在 examples 文件夹.

如果您想使用插件( 如 数据加载器, (中文(简体) ), 导出, (中文(简体) ), 响应, (中文(简体) ), 动画)需要包括适当的 <script> 标签.

举个例子 导出 插件 :

<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>

您可以在 examples/webpack-export 文件夹。 它更新了图表 dataProvider 每三秒钟.

更改日志

3.1.1 国家

• 加入支持回放17和回放18.

3.1.0 (中文(简体) )

• 正在添加 className 为元素指定 CSS 类的属性.

3.0.3 信息技术

• 修改版本范围 react 财务报告和审定财务报表 react-dom

3.0.0 (单位:千美元)

• 与其直接通过配置,不如使用新配置通过配置 options 属性.

• 正在添加 delay 用于控制图表延迟的属性.

2.0.7 国家

• 恢复等待图表初始化的代码 .

2.0.6 联合国

• 它现在等待图表在更新之前初始化(这纠正了一些错误).

2.0.5 (中文(简体) )

• 恢复2.0.4

2.0.4 国家

• 使用 React 修正贬值警告 (谢谢一泉)

• 在窃听器周围工作 groupToPeriods

2.0.3 联合国

• 正在修复一个 更新地图时出错

2.0.2 (中文(简体) )

• 正在用 React.createClass (谢谢一泉)

2.0.0 (韩语)

• 主要突破更改: 此插件不再自动导入安图, 所以您必须使用 <script> 装入图的标签

• 重大突破更改: 您现在必须使用 AmCharts.React 而不是说 AmCharts

1.1.8 国家

• 用更新图表数据修复另一个错误

1.1.7 联合国

• 修改图表时不缩放的错误 dataProvider

1.1.6 联合国

• 在第一次更新时修补图表不会正确显示的错误

1.1.5 国家

• 修正导致股票图表无法正确更新的错误

1.1.4 国家

• 使用折旧 AmCharts 用Web包装,取而代之的是使用 AmCharts.React
• 在各种全球添加 AmCharts web 软件包属性

1.1.3 国家

• 修复一个导致 listeners 以多次触发

1.1.2 国家

• 正在修复一个 使用时的问题 amcharts3-react 在服务器上

1.1.1 (中文(简体) )

• 正在修复一个 问题 peerDependencies

1.1.0 国家

• 添加到 npm / Webpack 的支持中

1.0.0 (单位:千美元)

• 初步释放