x轴中的高亮时间间隔

Question

我正在使用Highcharts JS库，

现在我需要创建月度报告。我有多个销售订单，对应于每月的天数。例如，在第1天，销售订单数量为30，第2天为20 ....

但我只想在x-Axis（日）中显示1,5,10,15,20,25,30之类的信息，并且仍会显示有关每天销售订单的信息。

我必须使用什么选项？

非常感谢。

编辑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天。没关系，但我想知道我能控制这个间隔吗？

Answer 1

您可以尝试使用x轴的tickInterval选项。 E.g。

xAxis: {
     tickInterval: 5
}