javascript - 检测 amCharts 中单击 Max 的时间

Question

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

问题是，当我当前处于 1D 缩放级别并单击“最大”时，分钟差异等于 2 天，并且它仅显示 2 天的数据，因为我在分钟数据集中只有那么多数据。我希望它显示我已有 2 年的 Days 数据集。但生成的事件仅针对仅包含 2 天数据的当前数据集具有最小开始日期和最大结束日期。

Answer 1

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

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

演示:

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
    });
  }
}

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

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

<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>