javascript - Highcharts 甘特图 - 需要允许没有数据的类别

Question

我正在尝试构建一个甘特图，就像在这个 JSFiddle 示例中一样[ http://jsfiddle.net/2xkfm87e/11/ ](我现在已经使用下面的 jlbriggs 输入将这个 fiddle 更新为工作版本。它还包括我需要的一些其他选项 - 即每个间隔的工具提示。)

但是，即使一个或多个没有任何关联数据，我也需要显示所有类别。最终用户需要知道没有与该类别关联的数据。在我的 JSFiddle 示例中，我能想到的最好办法就是使用初始日期并创建一个点来通知用户该类别没有数据。我宁愿它是空的。

如有任何帮助，我们将不胜感激!

  $(function () {
        // Define tasks
        var tasks = [{
            name: 'Category 1',
            intervals: [{ // From-To pairs
                from: Date.UTC(2010,5, 21),
                to: Date.UTC(2015, 5, 21),
                label: 'Category 1'
            }]
        }, {
            name: 'Category 2- Should be null',
            intervals: [{ // From-To pairs
                from: Date.UTC(2010,5, 21),
                to: Date.UTC(2010, 5, 21),
                label: 'Category 2- Should be null'
            }]
        }, {
            name: 'Category 3',
            intervals: [{ // From-To pairs
                from: Date.UTC(2011,05,16),
                to: Date.UTC(2012,03,21 ),
                label: 'Category 3'
            }, {
                from: Date.UTC(2013,07,09),
                to: Date.UTC(2015,05,22),
                label: 'Category 3'
            }]
        }, {
            name: 'Category 4',
            intervals: [{ // From-To pairs
                from: Date.UTC(2013,07,18 ),
                to: Date.UTC(2015,05,22),
                label: 'Category 4'
            }]
        }, {
            name: 'Category 5',
            intervals: [{ // From-To pairs
                from: Date.UTC(2013,06,17),
                to: Date.UTC(2014,04,21),
                label: 'Category 5'
            }, {
                from: Date.UTC(2015,01,22),
                to: Date.UTC(2015,05,22),
                label: 'Category 5'
            }]
        }, {
            name: 'Category 6',
            intervals: [{ // From-To pairs
                from: Date.UTC(2013,06,17),
                to: Date.UTC(2014,04,21),
                label: 'Category 6'
            }, {
                from: Date.UTC(2015,01,22),
                to: Date.UTC(2015,05,22),
                label: 'Category 6'
            }]
        }, {
            name: 'Category 7',
            intervals: [{ // From-To pairs
                from: Date.UTC(2013,06,17),
                to: Date.UTC(2014,04,21),
                label: 'Category 7'
            }, {
                from: Date.UTC(2015,01,22),
                to: Date.UTC(2015,05,22),
                label: 'Category 7'
            }]
        }, {
            name: 'Category 8',
            intervals: [{ // From-To pairs
                from: Date.UTC(2013,06,17),
                to: Date.UTC(2014,04,21),
                label: 'Category 8'
            }, {
                from: Date.UTC(2015,01,22),
                to: Date.UTC(2015,05,22),
                label: 'Category 8'
            }]
        }, {
            name: 'Category 9',
            intervals: [{ // From-To pairs
                from: Date.UTC(2013,06,17),
                to: Date.UTC(2014,04,21),
                label: 'Category 9'
            }, {
                from: Date.UTC(2015,01,22),
                to: Date.UTC(2015,05,22),
                label: 'Category 9'
            }]
        }];

        // Define milestones
        /*var milestones = [{
            name: 'Get to bed',
            time: Date.UTC(0, 0, 0, 22),
            task: 1,
            marker: {
                symbol: 'triangle',
                lineWidth: 1,
                lineColor: 'black',
                radius: 8
            }
        }];
            */
        // re-structure the tasks into line seriesvar series = [];
        var series = [];
        $.each(tasks.reverse(), function(i, task) {
            var item = {
                name: task.name,
                data: []
            };
            $.each(task.intervals, function(j, interval) {
                item.data.push({
                    x: interval.from,
                    y: i,
                    label: interval.label,
                    from: interval.from,
                    to: interval.to
                }, {
                    x: interval.to,
                    y: i,
                    from: interval.from,
                    to: interval.to
                });

                // add a null value between intervals
                if (task.intervals[j + 1]) {
                    item.data.push(
                        [(interval.to + task.intervals[j + 1].from) / 2, null]
                    );
                }

            });

            series.push(item);
        });

        // restructure the milestones
        /*$.each(milestones, function(i, milestone) {
            var item = Highcharts.extend(milestone, {
                data: [[
                    milestone.time,
                    milestone.task
                ]],
                type: 'scatter'
            });
            series.push(item);
        });
            */

        // create the chart
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container'
            },

            title: {
                text: 'Category History'
            },

            xAxis: {
                type: 'datetime'
            },

            yAxis: {

                categories: ['Category 9',
                             'Category 8',
                             'Category 7',
                             'Category 6',
                             'Category 5',
                             'Category 4',
                             'Category 3',
                             'Category 2',
                             'Category 1'],
                tickInterval: 1,            
                tickPixelInterval: 200,
                labels: {
                    style: {
                        color: '#525151',
                        font: '12px Helvetica',
                        fontWeight: 'bold'
                    },
                   /* formatter: function() {
                        if (tasks[this.value]) {
                            return tasks[this.value].name;
                        }
                    }*/
                },
                startOnTick: false,
                endOnTick: false,
                title: {
                    text: 'Criteria'
                },
                minPadding: 0.2,
                maxPadding: 0.2,
                   fontSize:'15px'

            },

            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ tasks[this.y].name + '</b><br/>' +
                        Highcharts.dateFormat('%m-%d-%Y', this.point.options.from)  +
                        ' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to); 
                }
            },

            plotOptions: {
                line: {
                    lineWidth: 10,
                    marker: {
                        enabled: false
                    },
                    dataLabels: {
                        enabled: true,
                        align: 'left',
                        formatter: function() {
                            return this.point.options && this.point.options.label;
                        }
                    }
                }
            },

            series: series

        });        
   });

Answer 1

即使没有数据，Highcharts 默认行为也会显示类别，除非它是第一个或最后一个类别。

在您的情况下，您可以将输入数组更改为空的 intervals 数组:

• http://jsfiddle.net/jlbriggs/2xkfm87e/1/

如果您需要第一个或最后一个类别为空，则需要在 Y 轴上设置最小值和最大值:

• http://jsfiddle.net/jlbriggs/2xkfm87e/2/