AmChartsが表示されている月が設定されています。月

Question

AmCharts/AmStockChartsを使用して、1年全体のデータの折れ線グラフを表示しています。便利なズームレベルなので、1か月間表示するのは一般的にズームインされています。

デフォルトではデータの最後の月になりますが、代わりに現在の月を表示するように設定します。

は現在、このチャートの設定です：

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

はどのように私はそれを行うのでしょうか？

Answer 1

ボタンselectedのいずれかのボタンを有効にしてが有効になっているようです（ほとんどの場合、AmChartsの例の1 monthボタン）。これらのボタンは、デフォルトではデータの最後から開始しますが、periodSelectorに独自のchangedイベントを作成するとその動作が調整される可能性がありますが、それは少し話題になります。

デフォルトのズームを設定するには、zoomメソッドを呼び出して希望の日付にズームする独自のrenderedイベントを作成します。あなたが仕事に、このために、あなたのperiodSelectorからselectedプロパティを削除する必要があることに注意してください：

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

ここdemoです。

編集 initイベントでも同様に動作しますし、あなたのシナリオに応じて好ましいかもしれません。 validateData()/validateNow()が呼び出され、renderedイベントがトリガーされるため、最初のmakeChart呼び出し後にグラフにデータを動的に追加する場合は、デフォルトのズームコードも同時に発生します。これが起こらないようにするには、代わりにinitを使用してください。