检测何时在 amCharts 中单击 Max

Question

我正在使用 AmCharts 来显示图表数据。我针对不同的缩放级别使用不同的数据集。像一维一样，我使用分钟数据；对于 1W，我使用小时数据，对于 1Y，我使用天数据。我通过计算生成的 PeriodSelector "changed" 事件的 startDate 和 endDate 的分钟差值来更改数据集。

问题是当我当前处于 1D 缩放级别并单击“最大”时，分钟差异等于 2 天并且它仅显示 2 天数据，因为我在分钟数据集中只有那么多。我希望它显示我拥有 2 年的 Days 数据集。但是生成的事件只有 min startDate 和 max endDate 仅适用于只有 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>

检测何时在 amCharts 中单击 Max

Detect when Max is clicked in amCharts

javascript

amcharts