javascript - AmCharts设置显示月份

我正在使用AmCharts / AmStockCharts显示跨越全年的数据折线图。通常将其放大以显示一个月，因为这是一个有用的缩放级别。

它默认为具有数据的最后一个月，但是，我想将其设置为显示当前月份。

当前，这是图表的配置：

AmCharts.makeChart("overview_chart", {
        type: "stock",
        "theme": "light",
        "categoryAxesSettings": {
            minPeriod: "1hh",
            groupToPeriods: ["1hh"]
        },

        dataSets: [
            {
                fieldMappings: fieldMappings,
                dataProvider: chartData,
                title: "Overview",
                categoryField: "date"
            }
        ],

        panels: [
            {
                title: "Results",
                showCategoryAxis: true,
                percentHeight: 70,
                valueAxes: [
                    {
                        id: "v1",
                        stackType: "regular"
                    }
                ],

                categoryAxis: {
                    dashLength: 5
                },

                stockGraphs: stockGraphs,

                stockLegend: {
                 align: "left",
                 position: "absolute",
                 divId: "optimizationLegend"
                 }
            }
        ],

        chartScrollbarSettings: {

            graph: "Total", // shows nice profile
            graphType: "line",
            usePeriod: "1hh"
        },

        chartCursorSettings: {
            valueBalloonsEnabled: true,
            valueLineBalloonEnabled: true,
            valueLineEnabled: true,
            categoryBalloonText: '[[category]]',
            categoryBalloonDateFormats: [
                {
                    period: "YYYY",
                    format: "DD.MM.YYYY HH:NN"
                }, {
                    period: "MM",
                    format: "DD.MM.YYYY HH:NN"
                }, {
                    period: "WW",
                    format: "DD.MM.YYYY HH:NN"
                }, {
                    period: "DD",
                    format: "DD.MM.YYYY HH:NN"
                }, {
                    period: "hh",
                    format: "DD.MM.YYYY HH:NN"
                }, {
                    period: "mm",
                    format: "DD.MM.YYYY HH:NN"
                }, {
                    period: "ss",
                    format: "DD.MM.YYYY HH:NN"
                }, {
                    period: "fff",
                    format: "DD.MM.YYYY HH:NN"
                }
            ]
        },

        periodSelector: {
            position: "bottom",
            periods: [
                {
                    period: "MM",
                    selected: true,
                    count: 1,
                    label: "1 month"
                }, {
                    period: "YYYY",
                    count: 1,
                    label: "1 year"
                }, {
                    period: "YTD",
                    label: "YTD"
                }, {
                    period: "MAX",
                    label: "MAX"
                }
            ]
        },
        "export": {
            "enabled": true
        }
    });

我该怎么做？

最佳答案

听起来您启用了periodSelector并将按钮的selected属性之一设置为true（最有可能是AmCharts示例中的1 month按钮）。默认情况下，这些按钮始终从数据末尾开始，但是如果您在changed中创建自己的periodSelector事件，则可以对行为进行调整，但这与主题无关。

您可以通过创建自己的rendered事件来设置默认缩放，该事件通过调用图表的zoom方法缩放到所需日期。请注意，您需要从selected中删除​​periodSelector属性，此功能才能起作用：

var chart = AmCharts.makeChart("chartdiv", {
  // ...
  "listeners": [{
    "event": "rendered",
    "method": function(e) {
      var startDate = new Date();
      var endDate = new Date();

      startDate.setDate(1);
      endDate.setMonth(endDate.getMonth() + 1, 1);
      e.chart.zoom(startDate, endDate);
    }
  }]
});

这是demo。

编辑
init事件也将起作用，并且根据您的情况可能更可取。 validateData() / validateNow()调用会触发rendered事件，因此，如果您在初始makeChart调用之后将数据动态添加到图表中，则默认的缩放代码也会触发。如果您不希望发生这种情况，请改用init。