Highcharts 向下钻取列范围

我想知道是否有人试图在列范围图中添加细分。 这是我试图做的一个例子：

欢迎任何建议

谢谢

---

p

这确实有效，您只需特别注意主系列和深入系列的格式：

$('#container').highcharts({
    chart: {
        type: 'columnrange',
        inverted: true
    },

    xAxis: {
        type: 'category'
    },

    yAxis: {
        type: 'datetime'
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Yearly',
        colorByPoint: true,
        data: [{
            name: 'Yearly1',
            low: Date.UTC(2007, 2, 2),
            high: Date.UTC(2009, 5, 10),
            drilldown: 'monthly1'
        }, {
            name: 'Yearly2',
            low: Date.UTC(2009, 6, 10),
            high: Date.UTC(2011, 9, 10),
            drilldown: 'monthly2'
        }, {
            name: 'Yearly3',
            low: Date.UTC(2011, 9, 25),
            high: Date.UTC(2014, 5, 1),
            drilldown: 'monthly3'
        }]
    }],
    drilldown: {
        series: [{
            id: 'monthly1',
            data: [{
                name: 'example1',
                low: Date.UTC(2009, 6, 10),
                high: Date.UTC(2009, 6, 11)
            }, {
                name: 'example2',
                low: Date.UTC(2009, 6, 10),
                high: Date.UTC(2009, 6, 15)
            }]
        }, {
            id: 'monthly2',
            data: [{
                name: 'example1',
                low: Date.UTC(2010, 5, 10),
                high: Date.UTC(2010, 6, 11)
            }, {
                name: 'example2',
                low: Date.UTC(2010, 8, 10),
                high: Date.UTC(2010, 8, 15)
            }]
        }, {
            id: 'monthly3',
            data: [{
                name: 'example1',
                low: Date.UTC(2012, 9, 10),
                high: Date.UTC(2012, 9, 11)
            }, {
                name: 'example2',
                low: Date.UTC(2012, 11, 10),
                high: Date.UTC(2012, 11, 15)
            }]
        }]
    }

});

这是一把小提琴：

---

进一步格式化数据标签是有意义的（使日期可读并适当地返回实际的系列/深入名称），但我没有将其包括在本手册中。

一般来说，它应该可以工作，但它不能。我已经报告了错误。这是一个试图让它工作的演示：wielkie dzieki Pawel！

$('#container').highcharts({
    chart: {
        type: 'columnrange',
        inverted: true
    },

    xAxis: {
        type: 'category'
    },

    yAxis: {
        type: 'datetime'
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Yearly',
        colorByPoint: true,
        data: [{
            name: 'Yearly1',
            low: Date.UTC(2007, 2, 2),
            high: Date.UTC(2009, 5, 10),
            drilldown: 'monthly1'
        }, {
            name: 'Yearly2',
            low: Date.UTC(2009, 6, 10),
            high: Date.UTC(2011, 9, 10),
            drilldown: 'monthly2'
        }, {
            name: 'Yearly3',
            low: Date.UTC(2011, 9, 25),
            high: Date.UTC(2014, 5, 1),
            drilldown: 'monthly3'
        }]
    }],
    drilldown: {
        series: [{
            id: 'monthly1',
            data: [{
                name: 'example1',
                low: Date.UTC(2009, 6, 10),
                high: Date.UTC(2009, 6, 11)
            }, {
                name: 'example2',
                low: Date.UTC(2009, 6, 10),
                high: Date.UTC(2009, 6, 15)
            }]
        }, {
            id: 'monthly2',
            data: [{
                name: 'example1',
                low: Date.UTC(2010, 5, 10),
                high: Date.UTC(2010, 6, 11)
            }, {
                name: 'example2',
                low: Date.UTC(2010, 8, 10),
                high: Date.UTC(2010, 8, 15)
            }]
        }, {
            id: 'monthly3',
            data: [{
                name: 'example1',
                low: Date.UTC(2012, 9, 10),
                high: Date.UTC(2012, 9, 11)
            }, {
                name: 'example2',
                low: Date.UTC(2012, 11, 10),
                high: Date.UTC(2012, 11, 15)
            }]
        }]
    }

});