Question

我想知道是否有人试图将钻取添加到列范围图表中。这是我正在尝试做的一个例子：http://jsfiddle.net/pawelk79/8jmV6/

$(function () {

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

    title: {
        text: 'History'
    },

    subtitle: {
        text: ''
    },

    xAxis: {
        categories: ['Example 1','Example 2', 'Example 3'],
    },

     yAxis: {
     type: 'datetime',
     min: new Date('2007,01,01').getTime(),
             max: new Date('2014,05,01').getTime(),
         title: {
            text: 'Year'
         }
     },
         tooltip: true,
     plotOptions: {
        columnrange: {
            dataLabels: {
                enabled: false,
                formatter: function () {
                    return this.y ;
                }
            }
        }
    },

    legend: {
        enabled:false
    },

    series: [{
        name: 'Year',
            data: 
        [
            [Date.UTC(2007, 2, 2), Date.UTC(2009, 5, 10)],
            [Date.UTC(2009, 6, 10), Date.UTC(2011, 9, 10)],
            [Date.UTC(2011, 9, 25), Date.UTC(2014, 5, 1)]
            ]
            }
    ]
});
});

欢迎任何建议。

由于

P

Answer 1

这确实有效，你只需要特别注意主系列和钻取系列的格式：

$('#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)
            }]
        }]
    }

});

这是一个工作小提琴：

http://jsfiddle.net/ycn75svr

进一步格式化dataLabels是有意义的（使日期可读并且可以保留实际的系列/钻取名称），但我没有把它包含在这个小提琴中。

深入研究色谱柱范围

1 个答案: