2015-07-20 266 views
0

我正在使用Highcharts JS庫,x軸上的Highchart時間間隔

現在我需要創建月度報告。我有一些銷售訂單,相當於月份的天數。例如,在第1天,銷售訂單的數量是30,第2天是20 ....

但我只想在x軸(日期)中顯示類似於1,5,10,15,20, 25,30,並且每天的銷售訂單信息仍顯示。

我必須使用什麼選項?

非常感謝。

EDIT 1 這是我的js代碼

<script> 
            var d = new Date(); 
            var m = d.getMonth(); 
            d.setMonth(d.getMonth() - 1); 
            if (d.getMonth() === m) 
             d.setDate(0); 
            d.setHours(0, 0, 0); 
            new Highcharts.Chart({ 
             chart: { 
              renderTo: 'container_sales_report', 
              type: 'line', 
              height: 380, 
              width: 415, 
              zoomType: 'xy' 
             }, 
             colors: ['#FF0000'], 
             title: { 
              text: 'Last 30 Days Reports', 
              x: -20 //center 
             }, 
             xAxis: [{ 
               type: 'datetime', 
               dateTimeLabelFormats: { 
                day: '%e of %b' 
               }, 
               crosshair: true 
              }], 
             yAxis: [{ 
               labels: { 
                format: '{value}', 
                style: { 
                 color: Highcharts.getOptions().colors[1] 
                } 
               }, 
               title: { 
                text: '', 
                style: { 
                 color: Highcharts.getOptions().colors[1] 
                } 
               } 
              }], 
             tooltip: { 
              formatter: function() { 
               return Highcharts.dateFormat('%d/%m', this.x) + ' : ' + this.y; 
              } 
             }, 
             legend: { 
              layout: 'horizontal', 
              align: 'bottom', 
              verticalAlign: 'bottom', 
              borderWidth: 0, 
              backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' 
             }, 
             plotOptions: { 
              spline: { 
               marker: { 
                enabled: false 
               } 
              } 
             }, 
             series: [{ 
               name: 'Cost', 
               type: 'spline', 
               data: [<?php echo $purchasesData; ?>], 
               pointStart: Date.UTC(d.getYear(), d.getMonth(), d.getDate()), 
               pointInterval: 24 * 3600 * 1000 // one day 
              }] 
            }); 
           </script> 

現在,在X軸的時間間隔爲7天。這很好,但我不知道有無論如何我可以控制這段時間?

+0

檢查https://stackoverflow.com/questions/16940512/how-to-assign-date-time-to-highchart-with-intervals-and-date-start/323​​57408#32357408 –

回答

0

您可以嘗試x軸的tickInterval選項。例如。

xAxis: { 
    tickInterval: 5 
} 
+0

謝謝您回覆。 xAxis我使用日期時間類型。當我使用tickInverval:5時,我得到空白頁 –

+0

你可以試試tickInterval:432000? – Eddie

+1

JS控制檯中的任何錯誤?無論如何,應該是'86400000' - 所以這是一天,和這裏一樣:'pointInterval:24 * 3600 * 1000 // one day'。 –