{"action":"opened","issue":{"url":"https://api.github.com/repos/amcharts/amcharts3-react/issues/20","repository_url":"https://api.github.com/repos/amcharts/amcharts3-react","labels_url":"https://api.github.com/repos/amcharts/amcharts3-react/issues/20/labels{/name}","comments_url":"https://api.github.com/repos/amcharts/amcharts3-react/issues/20/comments","events_url":"https://api.github.com/repos/amcharts/amcharts3-react/issues/20/events","html_url":"https://github.com/amcharts/amcharts3-react/issues/20","id":193440132,"number":20,"title":"I can not using amcharts3-animate plugins and the related method \"animateData\" in react ","user":{"login":"bleachdugu","id":9528499,"avatar_url":"https://avatars.githubusercontent.com/u/9528499?v=3","gravatar_id":"","url":"https://api.github.com/users/bleachdugu","html_url":"https://github.com/bleachdugu","followers_url":"https://api.github.com/users/bleachdugu/followers","following_url":"https://api.github.com/users/bleachdugu/following{/other_user}","gists_url":"https://api.github.com/users/bleachdugu/gists{/gist_id}","starred_url":"https://api.github.com/users/bleachdugu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bleachdugu/subscriptions","organizations_url":"https://api.github.com/users/bleachdugu/orgs","repos_url":"https://api.github.com/users/bleachdugu/repos","events_url":"https://api.github.com/users/bleachdugu/events{/privacy}","received_events_url":"https://api.github.com/users/bleachdugu/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-12-05T08:46:18Z","updated_at":"2016-12-05T08:46:18Z","closed_at":null,"body":"here is the part code of the charts component : \r\n\r\n\r\nimport React, { Component } from 'react'\r\nimport styles from './style.scss'\r\nimport style from './style.css'\r\nimport AmCharts from 'amcharts3-react'\r\nimport jsonData from './data.js'\r\n\r\n\r\n// https://github.com/amcharts/amcharts3-react/issues/10\r\nimport 'amcharts3/amcharts/serial'\r\n// import 'amcharts3-animate'\r\n\r\nclass BarChartTest extends Component {\r\n  constructor (props) {\r\n    super(props)\r\n    this.state = { num: 100 }\r\n    this.onClick = this.onClick.bind(this)\r\n  }\r\n\r\n  componentDidMount() {\r\n\r\n  }\r\n\r\n  onClick () {\r\n    setTimeout(()=>{\r\n        this.setState({ num: this.state.num + 20 }) \r\n    } , 100);\r\n  }\r\n\r\n  render () {\r\n\r\n    const data = [{\r\n      date: 0,\r\n      value: this.state.num\r\n    }]\r\n    // const selfRef  = this \r\n\r\n    // function redraw () {\r\n    //   selfRef.chartRef.animateData(data, {\r\n    //     duration: 1000,\r\n    //     complete: function () {\r\n\r\n    //     }\r\n    //   })\r\n    // }\r\n\r\n    const config = {\r\n      'type': 'serial',\r\n      'theme': 'light',\r\n      'dataProvider': data,\r\n      'startDuration': 1,\r\n      'addClassNames' : true,\r\n      'graphs': [{\r\n        id: 'g1',\r\n        valueField:  'value',\r\n        title:  'value',\r\n        type:  'column',\r\n        fillAlphas:  0.9,\r\n        valueAxis:  'a1',\r\n        legendPeriodValueText:  'total: [[value.sum]] mi',\r\n        lineColor:  '#263138',\r\n        alphaField:  'alpha'\r\n      }],\r\n      'valueAxes': [{\r\n        'minimum': -100,\r\n        'maximum': 500\r\n      }],\r\n      'chartCursor': {},\r\n      'zoomOutOnDataUpdate': false,\r\n      // 'listeners' : [{\r\n      //   'event' : 'init',\r\n      //   'method' : redraw\r\n      // }],\r\n      'animateData' : data,\r\n      'categoryField': 'date'\r\n    }\r\n\r\n    return (\r\n      <div className={styles.barChart}>\r\n        <AmCharts {...config} ref={(ref) => {this.chartRef = ref;}}/>\r\n        <div className={styles.scrollmenu} />\r\n        <button onClick={this.onClick}>add</button>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nexport default BarChartTest\r\n"}}
{"actor":{"display_login":"bleachdugu"}}