Отображен набор AmCharts Месяц

Question

Я использую AmCharts/AmStockCharts для отображения линейной диаграммы данных, охватывающей весь год. Обычно он увеличивается, чтобы отображать один месяц, так как это полезный масштаб.

По умолчанию это последний месяц, когда у него есть данные, и я бы хотел, чтобы он отображал текущий месяц.

В настоящее время это конфиг Картографическая:

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

Похоже, у вас есть periodSelector включен с одной из кнопок selected набора свойств истинных (скорее всего, кнопок 1 month из примеров AmCharts). Эти кнопки всегда начинаются с конца ваших данных по умолчанию, хотя поведение может быть изменено, если вы создаете собственное событие changed в periodSelector, но это немного не соответствует теме.

Вы можете установить масштаб по умолчанию, создав собственное событие rendered, которое масштабирует до нужных дат, вызывая метод zoom диаграммы. Обратите внимание, что вам нужно удалить selected свойство от вашего periodSelector для этого работы:

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.