使用 amchart 的甘特图的初始日期范围
Initial date range using amchart's gantt
我正在使用 Amchart 的甘特图。
段按日期划分。
我需要图表的导航器初始位置在两个日期之间,而不是应用于整个图表。
当前行为:
预期结果:
我尝试添加 'startDate' 和 'endDate' 但没有成功。
我的 Amchat 配置:
<AmCharts.React
className="my-class"
style={{
width: '50%',
height: '250px'
}}
options={
{
"height": "500",
"hideCredits":true,
"type": "gantt",
"theme": "light",
"marginRight": 70,
"period": "DD",
"dataDateFormat": "YYYY-MM-DD",
"columnWidth": 0.45,
"valueAxis": {
"type": "date"
},
"graph": {
"lineAlpha": 1,
"lineColor": "#fff",
"fillAlphas": 0.85,
"showAllValueLabels": false,
"cornerRadiusTop": 4
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDateField": "start",
"endDateField": "end",
"dataProvider": this.state.dataProvider,
"valueScrollbar": {
"selectedBackgroundColor": '#f3faff',
"selectedBackgroundAlpha": 1,
"autoGridCount": false
},
"chartCursor": {
"cursorColor": "#55bb76",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"valueLineBalloonEnabled": false,
"valueLineEnabled": false,
"zoomable": false,
"valueZoomable": true
},
"export": {
"enabled": false
}
}
}
/>
谢谢。
您可以使用 "zoomToDates(start, end)" 属性 的 AmGanttChart。相关参考如下:
AmGanttChart | JavaScript Charts v. 3 | amCharts
您还可以从该问题中找到 属性 的用法:
AM Charts initial view using zoomToDates
我正在使用 Amchart 的甘特图。 段按日期划分。
我需要图表的导航器初始位置在两个日期之间,而不是应用于整个图表。
当前行为:
预期结果:
我尝试添加 'startDate' 和 'endDate' 但没有成功。
我的 Amchat 配置:
<AmCharts.React
className="my-class"
style={{
width: '50%',
height: '250px'
}}
options={
{
"height": "500",
"hideCredits":true,
"type": "gantt",
"theme": "light",
"marginRight": 70,
"period": "DD",
"dataDateFormat": "YYYY-MM-DD",
"columnWidth": 0.45,
"valueAxis": {
"type": "date"
},
"graph": {
"lineAlpha": 1,
"lineColor": "#fff",
"fillAlphas": 0.85,
"showAllValueLabels": false,
"cornerRadiusTop": 4
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDateField": "start",
"endDateField": "end",
"dataProvider": this.state.dataProvider,
"valueScrollbar": {
"selectedBackgroundColor": '#f3faff',
"selectedBackgroundAlpha": 1,
"autoGridCount": false
},
"chartCursor": {
"cursorColor": "#55bb76",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"valueLineBalloonEnabled": false,
"valueLineEnabled": false,
"zoomable": false,
"valueZoomable": true
},
"export": {
"enabled": false
}
}
}
/>
谢谢。
您可以使用 "zoomToDates(start, end)" 属性 的 AmGanttChart。相关参考如下:
AmGanttChart | JavaScript Charts v. 3 | amCharts
您还可以从该问题中找到 属性 的用法:
AM Charts initial view using zoomToDates