检测在amCharts中单击Max的时间

Question

我正在使用AmCharts显示图表数据。我正在为不同的缩放级别使用不同的数据集。和1D一样，我使用Minutes数据;对于1W，我使用小时数据，对于1Y我使用天数据。我通过计算startDate和endDate的分钟数来改变数据集，以便生成PeriodSelector的“已更改”事件。

问题在于，当我目前处于1D缩放级别，并且我单击Max时，分钟的差异等于2天，并且它仅显示2天数据，因为我在分钟数据集中只有那么多。我想让它显示我有2年的Days数据集。但是生成的事件只有当前数据集的最小startDate和max endDate，它只有2天的数据。

Answer 1

changed事件中的predefinedPeriod属性包含单击按钮的标签。您可以使用它来检测单击了哪个按钮：

    listeners: [
      {
        event: "changed",
        method: function(eventObj) {
          console.log("clicked " + eventObj.predefinedPeriod);
        }
      }
    ]

演示：

＆＃13;

＆＃13;

var chartData1 = [];
generateChartData();

var chart = AmCharts.makeChart("chartdiv", {
  type: "stock",
  theme: "light",

  dataSets: [
    {
      fieldMappings: [
        {
          fromField: "value",
          toField: "value"
        },
        {
          fromField: "volume",
          toField: "volume"
        }
      ],
      dataProvider: chartData1,
      categoryField: "date"
    }
  ],

  panels: [
    {
      showCategoryAxis: false,

      stockGraphs: [
        {
          id: "g1",
          valueField: "value",
          comparable: true,
          compareField: "value",
          balloonText: "[[title]]:<b>[[value]]</b>",
          compareGraphBalloonText: "[[title]]:<b>[[value]]</b>"
        }
      ]
    }
  ],

  periodSelector: {
    position: "left",
    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"
      }
    ],
    listeners: [
      {
        event: "changed",
        method: function(eventObj) {
          console.log("clicked " + eventObj.predefinedPeriod);
        }
      }
    ]
  }
});

function generateChartData() {
  var firstDate = new Date();
  firstDate.setDate(firstDate.getDate() - 500);
  firstDate.setHours(0, 0, 0, 0);

  for (var i = 0; i < 500; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);

    var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
    var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;

    chartData1.push({
      date: newDate,
      value: a1,
      volume: b1
    });
  }
}

＆＃13;

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
  width: 100%;
  height: 100%;
}

＆＃13;

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>

＆＃13;

＆＃13;

＆＃13;