amCharts에서 Max를 클릭하면 감지

Question

AmCharts를 사용하여 차트 데이터를 표시하고 있습니다. 다른 줌 레벨에 대해 다른 데이터 세트를 사용하고 있습니다. 1D처럼 Minutes 데이터를 사용합니다. 1W의 경우 Hours 데이터를 사용하고 1Y는 Days 데이터를 사용합니다. 내가 periodaselector의 생성 된 "변경"이벤트에 대한 startDate 및 endDate에 대한 분 차이를 계산하여 데이터 세트를 변경합니다. 문제는 현재 1D 확대/축소 수준에서 최대를 클릭하면 분 차이가 2 일이고 분 데이터 집합에 그만큼 많이있는 것처럼 2 일 데이터 만 표시된다는 것이 문제입니다. 내가 2 년 동안 가지고있는 Days 데이터 세트를 표시하고 싶습니다. 그러나 생성 된 이벤트에는 단지 2 일 데이터 만있는 현재 데이터 세트에 대해서만 min startDate 및 max endDate가 있습니다.

도와주세요. 감사합니다 :)

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>