无法放大 amcharts

Question

我正在尝试使我的 AMChart 正确缩放，因为我有 2 分钟的数据。间隔并希望能够按分钟查看数据。

但是当我尝试 'mark' 缩放或使用按钮使用定义的时间段时。它只是看起来根本不正确。按钮给出了错误的间隔，当放大到特定日期时，缩放会给我垂直线。

我也曾尝试让我的 Y 轴始终从 0 开始，只是不想发生这种情况。

谁能看出我这里做错了什么？

this.chart = this.AmCharts.makeChart("m_amcharts_1", {
            "type": "stock",
            "theme": "light",
            "dataDateFormat": "YYYY-MM-DD HH:NN",

            categoryAxis: [{
                gridPosition: "start",
                axisColor: "#DADADA",
                axisAlpha: 0,
                minHorizontalGap: 75,
                startOnAxis: true,
                parseDates: true,
                equalSpacing: true,
                markPeriodChange: false,
                firstDayOfWeek: 0,
                dateFormats: [{
                    period: 'ss',
                    format: 'JJ:NN:SS'
                }, {
                    period: 'mm',
                    format: 'JJ:NN'
                }, {
                    period: 'hh',
                    format: 'JJ:NN'
                }, {
                    period: 'DD',
                    format: 'MM/DD/YYYY'
                }]
            }],
            "guides": [],
            "valueAxes": [{
              "id": "ValueAxis-1",
              "capMaximum": 10,
              "capMinimum": 0,
              "minimum": 0,
              "title": ""
            }],
            "dataSets": [],

            "panels": [ {
              "showCategoryAxis": true,
              "title": "Value",

              "percentHeight": 70,
              "stockGraphs": [ {
                "id": "g1",

                "valueField": "value",
                "comparable": true,
                "compareField": "value",
                "balloonText": "[[title]]:<b>[[value]]</b>",
                "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
              } ],
              "stockLegend": {
                "periodValueTextComparing": "[[percents.value.close]]%",
                "periodValueTextRegular": "[[value.close]]"
              }
            }, 
            {
                "title": "Volume",
                "percentHeight": 30,
                "stockGraphs": [ {
                  "valueField": "volume",
                  "type": "column",
                  "showBalloon": false,
                  "fillAlphas": 1
                } ],

                "stockLegend": {
                  "periodValueTextRegular": "[[value.close]]"
                }
              }
        ],

            "categoryAxesSettings": {
                "maxSeries": 1,
                "groupToPeriods": ["30mm"]
              },

            "chartScrollbarSettings": {
              "graph": "g1"
            },

            "chartCursorSettings": {
              "valueBalloonsEnabled": true,
              "fullWidth": true,
              "cursorAlpha": 0.1,
              "valueLineBalloonEnabled": true,
              "valueLineEnabled": true,
              "valueLineAlpha": 0.5
            },


            "periodSelector": {
                "position": "left",
                "dateFormat": "YYYY-MM-DD JJ:NN",
                "inputFieldWidth": 150,
                "periods": [ {
                  "period": "hh",
                  "count": 1,
                  "label": "1 hour"
                }, {
                  "period": "hh",
                  "count": 2,
                  "label": "2 hours"
                }, {
                  "period": "hh",
                  "count": 5,
                  "selected": true,
                  "label": "5 hour"
                }, {
                  "period": "hh",
                  "count": 12,
                  "label": "12 hours"
                }, {
                  "period": "MAX",
                  "label": "MAX"
                } ]
              },

            "dataSetSelector": {
              "position": "left"
            },
            "panelsSettings": {
                "recalculateToPercents": "never"
              },

            "export": {
              "enabled": true,
              "position": "bottom-right"
            }
          });

Answer 1

我认为您应该能够将此属性添加到您的属性中：

"zoomControl": { "zoomControlEnabled": true }

ZoomControl

Answer 2

您必须调整 categoryAxesSettings 中的 minPeriod 以符合数据中各点之间的最小间隔。默认设置为天 ("DD")，因此您需要将其更改为分钟 ("mm")，因为这是您的点之间的最小间隔：

categoryAxesSettings: {
  // ...
  minPeriod: "mm",
  // ...
}

另请注意，您的 categoryAxis 设置不正确 - 您可以在 categoryAxesSettings 中设置 categoryAxis 属性。请注意，dateFormats 必须包含 all 个周期的完整数组，而不仅仅是您关心的那些。当您有大量数据时，不包括完整数组会导致缩放问题。

至于您的 valueAxis，如果您希望设置应用于两个面板，您可以在 panel or in valueAxesSettings 中设置它：

valueAxesSettings: {
  // ...
  minimum: 0,
  // ...
}

Updated fiddle

无法放大 amcharts

Not able to zoom on amcharts

amcharts

angular