使用 amchart 甘特图的初始日期范围答案

【问题标题】：Initial date range using amchart's gantt使用 amchart 甘特图的初始日期范围
【发布时间】：2020-05-20 10:17:45
【问题描述】：

我正在使用 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
                    }
                }
            }
        />

谢谢。

【问题讨论】：

标签： javascript reactjs charts amcharts

【解决方案1】：

您可以使用 AmGanttChart 的“zoomToDates(start, end)”属性。以下是相关参考：
AmGanttChart | JavaScript Charts v. 3 | amCharts

您还可以从该问题中找到该属性的用法：
AM Charts initial view using zoomToDates

【讨论】：