无法放大amcharts

时间:2018-02-13 13:06:39

标签: angular amcharts

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

但是当我尝试'标记'来缩放或使用按钮来使用定义的时间周期时。它根本就没有正确看待。按钮给出了错误的间隔,缩放将在缩放到特定日期时给我垂直线。

我也试图让我的Y轴始终从0开始,它只是不想发生。

http://jsfiddle.net/5868z7xw/

谁能看到我在这里做错了什么?

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"
            }
          });

2 个答案:

答案 0 :(得分:1)

您必须调整categoryAxesSettings中的minPeriod,以便与数据中各点之间的最小间隔相对应。默认设置为天("DD"),因此您希望将其更改为分钟("mm"),因为这是您的积分之间的最小间隔:

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

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

至于您的valueAxis,如果您希望将设置应用于两个面板,则可以在panelvalueAxesSettings中进行设置:

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

Updated fiddle

答案 1 :(得分:0)

我认为你应该能够将这个属性添加到你的身上:

"zoomControl": { "zoomControlEnabled": true }

ZoomControl