即使没有数据,如何显示具有给定开始日期和结束日期的所有日期?

时间:2019-07-10 09:24:24

标签: highcharts gantt-chart

我对Highcharts Gantt完全陌生,正如标题所述;即使没有数据,如何显示具有给定开始日期和结束日期的所有日期?

Doesn't show all other dates

我正在使用以下代码:

Highcharts.ganttChart(id, {
            chart: {
                panning: true,
                style: {
                    fontFamily: 'Lato'
                }
            },
            tooltip: {
                pointFormat: '<span>{point.customerLastName}</span><br><span>From: {point.start:%e. %b . %Y}</span><br/><span>To: {point.end:%e. %b. %Y}</span>',
                followTouchMove: true
            },
            xAxis: [{
                    // first x-axis
                    tickInterval: month,
                    showEmpty: true,
                },
                {
                    // second x-axis
                    tickInterval: day,
                    showEmpty: true,
                }

            ],
            yAxis: {
                plotBands: {
                    thickness: 120
                },
                categories: data.labels,
                showEmpty: true,
                min: 0,
                max: data.labels.length
            },
            allowPointSelect: true,
            plotOptions: {
                series: {
                    animation: true,
                    dragDrop: {
                        draggableX: true,
                        draggableY: true,
                        dragPrecisionX: day
                    },
                    dataLabels: {
                        enabled: true,
                        format: '{point.customerLastName}',
                        style: {
                            cursor: 'default',
                            pointerEvents: 'none'
                        }
                    },
                    allowPointSelect: true,
                    events: {
                        click: function(a) {
                            var data = JSON.parse(a.point.jsonData);
                            data.referrer = "occupation-plan";
                            console.log(data);
                            $(document).trigger('booking-modal-edit', JSON.stringify(data));
                        }
                    }
                },
            },
            series: data.series,
        });

系列数据很好,但是我确实想显示给定开始日期和结束日期的所有日期,即使系列中没有这些日期的数据。

1 个答案:

答案 0 :(得分:0)

您需要在setExtremes上使用xAxis方法,例如:

chart.xAxis[0].setExtremes(
    Date.UTC(2014, 8, 18),
    Date.UTC(2014, 12, 18)
);

实时演示: https://jsfiddle.net/BlackLabel/qaphk3jd/

API参考: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes