javascript - AmCharts 设置显示月份

Question

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

我该怎么做？

Answer 1

听起来您启用了一个 periodSelector，其中一个按钮的 selected 属性设置为 true(很可能是 1 month 按钮来自 AmCharts 示例)。默认情况下，这些按钮始终从数据的末尾开始，但如果您创建自己的 changed，则可以调整行为。 periodSelector 中的事件，但这有点偏离主题。

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

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。