2015-07-20 224 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'。 –