1

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

我该怎么做？

4

1 回答 1

2

听起来您已periodSelector启用其中一个按钮的selected属性设置为 true（很可能1 month是 AmCharts 示例中的按钮）。默认情况下，这些按钮总是从数据的末尾开始，尽管如果您在 中创建自己的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);
    }
  }]
});

这是一个演示。

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

于 2017-01-31T13:46:43.113 回答