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（很可能是 AmCharts 示例中的 1 month 按钮).默认情况下，这些按钮始终从数据的末尾开始，但如果您在 periodSelector 中创建自己的 changed 事件，则可以调整行为，但这有点偏离主题。

您可以通过创建自己的 rendered event that zooms to your desired dates by calling the chart's 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 event will also work as well and may be preferable depending on your scenario. validateData()/validateNow() 调用会触发 rendered 事件，因此如果您在初始 makeChart 调用后向图表动态添加数据，那么默认缩放代码也会触发。如果您不希望发生这种情况，请改用 init。

AmCharts 设置显示月份

AmCharts set displayed Month

javascript

amcharts

amstock