yhonzhao
commented
7 years ago Closed yhonzhao closed 6 years ago
yhonzhao
commented
7 years ago 
RahavLussato
commented
7 years ago @yhonzhao you need to add listeners prop:
listeners={ [{ event: "init", method: (event) => console.log(event) }]}
Pauan
commented
7 years ago @yhonzhao Try using the listeners property, like this:
<AmCharts
listeners={[{
"event": "clickGraph",
"method": (e)=>{console.log(e,33333333)}
}]}
/>Here is the full code:
/**
* Created by yhon.
*/
import React from "react";
import AmCharts from "amcharts3-react";
require('amcharts3/amcharts/gantt.js')
AmCharts.useUTC = false;
AmCharts.monthNames = [
"1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"
]
AmCharts.shortMonthNames = [
"1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"
]
export default class Amcharts extends React.Component {
constructor(props) {
super(props);
}
render(){
var data = [ {
"category": "Module #1",
"segments": [ {
"start": "2016-01-01",
"end": "2016-01-14",
"color": "#b9783f",
"task": "Gathering requirements",
"segmentsField":"rrrrrrrrrrr",
"back":"44444444"
}, {
"start": "2016-01-16",
"end": "2016-01-27",
"task": "Producing specifications"
}, {
"start": "2016-02-05",
"end": "2016-04-18",
"task": "Development"
}, {
"start": "2016-04-18",
"end": "2016-04-30",
"task": "Testing and QA"
} ]
}, {
"category": "Module #2",
"segments": [ {
"start": "2016-01-08",
"end": "2016-01-10",
"color": "#cc4748",
"task": "Gathering requirements"
}, {
"start": "2016-01-08",
"end": "2016-01-15",
"color": "#cc4748",
"task": "Producing specifications"
}, {
"start": "2016-01-16",
"end": "2016-02-05",
"color": "#cc4748",
"task": "Development"
}, {
"start": "2016-02-10",
"end": "2016-02-18",
"color": "#cc4748",
"task": "Testing and QA"
} ]
}, {
"category": "Module #3",
"segments": [ {
"start": "2016-01-02",
"end": "2016-01-08",
"color": "#cd82ad",
"task": "Gathering requirements"
}, {
"start": "2016-01-08",
"end": "2016-01-16",
"task": "Producing specifications"
}, {
"start": "2016-01-19",
"end": "2016-03-01",
"task": "Development"
}, {
"start": "2016-03-12",
"end": "2016-04-05",
"task": "Testing and QA"
} ]
}, {
"category": "Module #4",
"segments": [ {
"start": "2016-01-01",
"end": "2016-01-19",
"color": "#2f4074",
"task": "Gathering requirements"
}, {
"start": "2016-01-19",
"end": "2016-02-03",
"task": "Producing specifications"
}, {
"start": "2016-03-20",
"end": "2016-04-25",
"task": "Development"
}, {
"start": "2016-04-27",
"end": "2016-05-15",
"task": "Testing and QA"
} ]
}, {
"category": "Module #5",
"segments": [ {
"start": "2016-01-01",
"end": "2016-01-12",
"color": "#448e4d",
"task": "Gathering requirements"
}, {
"start": "2016-01-12",
"end": "2016-01-19",
"task": "Producing specifications"
}, {
"start": "2016-01-19",
"end": "2016-03-01",
"task": "Development"
}, {
"start": "2016-03-08",
"end": "2016-03-30",
"task": "Testing and QA"
} ]
} ]
return (
<div style={{height:"400px"}}>
<AmCharts
ref="chart"
path="./"
type="gantt"
theme="light"
marginRight = {70}
period = "DD"
dataDateFormat= "YYYY-MM-DD"
columnWidth= {0.5}
valueAxis = {{
"type":"date"
}}
brightnessStep= {7}
graph = {{
"fillAlphas" : 1,
"lineAlpha": 1,
"lineColor": "#fff",
"fillAlphas": 0.85,
"balloonText": "<b>[[back]]</b>:<br />[[open]] -- [[value]]"
}}
rotate={true}
categoryField= "category"
segmentsField= "segments"
colorField= "color"
startDateField="start"
endDateField = "end"
valueScrollbar={ {
"autoGridCount": true
}}
chartCursor={ {
"cursorColor": "#55bb76",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"zoomable": false,
"valueZoomable": true
}}
dataProvider={data}
listeners={[{
"event": "clickGraph",
"method": (e)=>{console.log(e,33333333)}
}]}
/>
</div>
)
}
}@Pauan thanks a lot ，add listener has been solved。 but setting useUTC to false or shortMonthNames to else not work by useing the code that you gave。How can i solve this problem。Thanks again!
Pauan
commented
7 years ago @yhonzhao When you use import AmCharts from "amcharts3-react", the variable AmCharts is not the same as window.AmCharts, which is why setting useUTC, monthNames, and shortMonthNames does not work.
Instead, try this code:
window.AmCharts.useUTC = false;
window.AmCharts.monthNames = [
"1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"
]
window.AmCharts.shortMonthNames = [
"1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"
]@yhonzhao I just released a new version of amcharts3-react which allows you to use useUTC, monthNames, and shortMonthNames even if you don't use window
If you upgrade to the latest version of amcharts3-react, then your code should work.