顯示AmCharts設置月份

我使用AmCharts/AmStockCharts顯示跨越整年的數據折線圖。它通常放大顯示一個月，因爲這是一個有用的縮放級別。顯示AmCharts設置月份

但是，它默認爲它有數據的最後一個月，而我想將它設置爲顯示當前月份。

目前，這是圖表的配置：

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

我將如何做呢？

來源

2017-01-31 MarkZ

你能分享我們的小提琴來檢查你的問題嗎？ –

我想，但我現在沒有任何東西，甚至沒有部分解決方案。我正在通過加載一些數據並使用makeChart（）構建一個常規的AmStockChart。所以我不確定小提琴會顯示什麼？ – MarkZ

小提琴會顯示您正在使用的設置。一個「常規的AmStockChart」並沒有多少說明你已經啓用了什麼，因爲股票圖表不一定默認這種行爲，這取決於你使用的屬性。例如，只有面板和數據集屬性集的準系統設置將顯示整個數據集，而不僅僅是上個月。我可以猜測你可能從你描述的行爲中得到了什麼，並且可以回答一個答案，但是一個小提琴肯定會在評論中避免大量的來回。 – xorspark

這聽起來像你有一個periodSelector啓用與其中一個按鈕'selected屬性設置爲true（最有可能從AmCharts示例1 month按鈕）。這些按鈕始終默認從數據的末尾開始，但如果您在periodSelector中創建了自己的changed事件，則可以調整此行爲，但這有點偏離主題。

您可以通過創建自己的rendered事件來設置默認縮放比例，該事件通過調用圖表的zoom方法縮放到所需的日期。請注意，您需要從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。

來源

2017-01-31 13:46:43 xorspark

不幸的是，儘管我可以看到它被調用，但它完全沒有效果。它被調用時的事件類型也是「加載」，而不是「呈現」... – MarkZ

您確定已經像您說過的那樣刪除了periodSelector按鈕中的'selected'屬性嗎？這是做這項工作的重要部分。我[用你的代碼創建了一個codepen]（http://codepen.io/team/amcharts/pen/65753a3fb4c8167ff8a6a98d7fbca99f?editors=0010），它在我註釋掉'selected'行後適用於我。 – xorspark

的確我沒有，謝謝！ – MarkZ

顯示AmCharts設置月份

回答

相關問題