Charts 分组散点图或条形图

有没有办法制作带日期间隔的分组条形图/散点图

我尝试了两种不同的方法来达到预期的效果

1-使用分组条形图和trie应用间隔（未成功）。

2-使用散点图复制类似于甘特图的内容，但我无法将其分组。

---

我需要两者混合。有什么建议吗？

使用columnrange系列代替条形，请参见：

$(function () {

    Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
        return Highcharts.Color(color)
            .setOpacity(0.5)
            .get('rgba');
    });

    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Basic Info',
        },
        xAxis: {
            categories: [
                'Basic Info', ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' mm'
        },
        plotOptions: {
            bar: {
                grouping: false,
                shadow: false
            }
        },
        series: [{
            name: 'Basic Info 1',
            data: [49.9],
            pointPadding: 0

        }, {
            name: 'Basic Info 1',
            data: [83.6],
            pointPadding: 0.1

        }, {
            name: 'Basic Info 3',
            data: [48.9],
            pointPadding: 0.2

        }, {
            name: 'Basic Info 4',
            data: [42.4],
            pointPadding: 0.3

        }]
    });
});

    var tasks = [{
    name: 'Sleep',
    intervals: [{ // From-To pairs
        from: Date.UTC(0, 0, 0, 0),
        to: Date.UTC(0, 0, 0, 6),
    }, {
        from: Date.UTC(0, 0, 0, 22),
        to: Date.UTC(0, 0, 0, 24),
    }]
}, {
    name: 'Family time',
    intervals: [{ // From-To pairs
        from: Date.UTC(0, 0, 0, 6),
        to: Date.UTC(0, 0, 0, 8),

    }, {
        from: Date.UTC(0, 0, 0, 16),
        to: Date.UTC(0, 0, 0, 22)
    }]
}, {
    name: 'Eat',
    intervals: [{ // From-To pairs
        from: Date.UTC(0, 0, 0, 7),
        to: Date.UTC(0, 0, 0, 8),
    }, {
        from: Date.UTC(0, 0, 0, 12),
        to: Date.UTC(0, 0, 0, 12, 30)
    }, {
        from: Date.UTC(0, 0, 0, 16),
        to: Date.UTC(0, 0, 0, 17),
    }, {
        from: Date.UTC(0, 0, 0, 20, 30),
        to: Date.UTC(0, 0, 0, 21)
    }]
}, {
    name: 'Work',
    intervals: [{ // From-To pairs
        from: Date.UTC(0, 0, 0, 8),
        to: Date.UTC(0, 0, 0, 16)
    }]
}];


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
        });

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

    });

    series.push(item);
});



Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function              (color) {
    return Highcharts.Color(color)
    .setOpacity(0.5)
    .get('rgba');
});


var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    title: {
        text: 'Daily activities'
    },

    xAxis: {
        type: 'datetime'
    },

    yAxis: {
        tickInterval: 1,
        labels: false,
        startOnTick: false,
        endOnTick: false,
    },

    legend: {
        enabled: false
    },

    tooltip: {
        shared: true,
    },

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

    series: series

});

    $('#container').highcharts({
        chart: {
            type: 'columnrange',
            inverted: true
        },
        title: {
            text: 'Basic Info',
        },
        xAxis: {
            categories: [
                'Basic Info',
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' mm'
        },
        plotOptions: {
            columnrange: {
                grouping: false,
                shadow: false
            }
        },
        series: [{
            name: 'Basic Info 1',
            data: [[0,15,49.9]],
            pointPadding: 0

        }, {
            name: 'Basic Info 1',
            data: [[3,30,83.6]],
            pointPadding: 0.1

        }, {
            name: 'Basic Info 3',
            data: [[1,15,48.9]],
            pointPadding: 0.2

        }, {
            name: 'Basic Info 4',
            data: [[0,15,42.4]],
            pointPadding: 0.3

        }]
    });
});