AmChart x軸數據日期格式化，以小時分秒顯示每日值

Question

我試圖創建一個與時間相關的圖表。我想給每個子彈分年，月，日，時，分，秒。但我希望X軸不顯示分鐘和秒，如果用戶放大。

我的問題：什麼是日期格式，我必須指定chart.dataDateFormat和我的「日期」參數數據？

這是我的代碼到目前爲止。請讓我知道我應該改變什麼。 謝謝。

<script type="text/javascript"> 
      var chart; 

      var chartData = [ 
       { 
        "date": "2012-01-01", 
        "value": 0.24 
       }, 
       { 
        "date": "2012-01-02", 
        "value": 0.28 
       }, 
       { 
        "date": "2012-01-03", 
        "value": 0.34 
       }, 
       { 
        "date": "2012-01-04", 
        "value": 0.30 
       }, 
       { 
        "date": "2012-01-05", 
        "value": 0.27 
       } 
      ]; 


      AmCharts.ready(function() { 
       // SERIAL CHART   
       chart = new AmCharts.AmSerialChart(); 
       chart.pathToImages = "/images/"; 
       chart.dataProvider = chartData; 
       chart.dataDateFormat = "YYYY-MM-DD"; 
       chart.categoryField = "date"; 


       // AXES 
       // category 
       var categoryAxis = chart.categoryAxis; 
       categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true 
       categoryAxis.minPeriod = "hh"; // our data is daily, so we set minPeriod to DD    
       categoryAxis.gridAlpha = 0.1; 
       categoryAxis.minorGridAlpha = 0.1; 
       categoryAxis.axisAlpha = 0; 
       categoryAxis.minorGridEnabled = true; 
       categoryAxis.inside = true; 

       // value 
       var valueAxis = new AmCharts.ValueAxis(); 
       valueAxis.tickLength = 0; 
       valueAxis.axisAlpha = 0; 
       valueAxis.showFirstLabel = false; 
       valueAxis.showLastLabel = false; 
       chart.addValueAxis(valueAxis); 

       // GRAPH 
       var graph = new AmCharts.AmGraph(); 
       graph.dashLength = 3; 
       graph.lineColor = "gray"; 
       graph.valueField = "value"; 

       graph.dashLength = 3; 
       graph.bullet = "round"; 
       graph.lineThickness = 0; 
       graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>"; 
       chart.addGraph(graph); 

       // CURSOR 
       var chartCursor = new AmCharts.ChartCursor(); 
       chart.addChartCursor(chartCursor); 

       // SCROLLBAR 
       var chartScrollbar = new AmCharts.ChartScrollbar(); 
       chart.addChartScrollbar(chartScrollbar); 

       // HORIZONTAL GREEN RANGE 
       var guide = new AmCharts.Guide(); 
       guide.value = 0.26; 
       guide.toValue = 0.32; 
       guide.fillColor = "#00CC00"; 
       guide.inside = true; 
       guide.fillAlpha = 0.2; 
       guide.lineAlpha = 0; 
       valueAxis.addGuide(guide); 

       // TREND LINES 
       // first trend line 
       var trendLine = new AmCharts.TrendLine(); 
       // note,when creating date objects 0 month is January, as months are zero based in JavaScript. 
       trendLine.initialDate = new Date(2012, 0, 1, 0,59); // 12 is hour - to start trend line in the middle of the day 
       trendLine.finalDate = new Date(2012, 0, 23, 24); 
       trendLine.initialValue = 0.28; 
       trendLine.finalValue = 0.28; 
       trendLine.lineColor = "#CC0000"; 
       chart.addTrendLine(trendLine); 

       // WRITE 
       chart.write("chartdiv"); 
      }); 
    </script> 

Answer 1

我終於在夜裏想通了。我爲那些尋找它的人們提供解決方案。

的chartData必須是：

{ 「日期」： 「2014年3月1日，8時05分05秒」， 「值」：0.25}

的chart.dataDateFormat必須是：

chart.dataDateFormat =「YYYY-MM-DD，JJ：NN：SS」;

希望它可以幫助別人。