Comments (5)
RahavLussato
commented on August 16, 2024
2
@yhonzhao you need to add listeners prop:
listeners={ [{ event: "init", method: (event) => console.log(event) }]}
from amcharts3-react.
Pauan
commented on August 16, 2024
@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>
)
}
}
from amcharts3-react.
yhonzhao
commented on August 16, 2024
@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!
from amcharts3-react.
Pauan
commented on August 16, 2024
@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月"
]
from amcharts3-react.
Pauan
commented on August 16, 2024
@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.
from amcharts3-react.
Related Issues (20)
- How to Hide "Js charts by Amcharts" message on the graphs HOT 3
- There is no horizontal scroll HOT 3
- Facing "this.legend.destroy is not a function" when component unmounts HOT 2
- Images are not visible HOT 1
- Issue in reconstructing amcharts in React HOT 1
- on
- Uncaught TypeError: Cannot read property 'capture' of undefined HOT 1
- color changin HOT 1
- valueAxes is not working for X axis HOT 1
- when to release amcharts4-react HOT 2
- d.AmStockChart is not a constructor HOT 1
- Test cases failing: ReferenceError: AmCharts is not defined HOT 1
- How do I use methods if I use JSX? HOT 1
- Does AmCharts support react native HOT 1
- Custom ID to AmCharts HOT 1
- Line with lower value is appearing above the others HOT 1
- How to update config for amChart4 HOT 1
- is it available to set a colums / options for exporting csv?
- chart.removeListener is not a function after upgrade the Webpack 4 to 5
- Support for react v17.x in peerDependencies HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from amcharts3-react.