在列範圍上鑽取

我想知道是否有人試圖將鑽取添加到列範圍圖表中。這是什麼，我試圖做一個例子：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)] 
      ] 
      } 
    ] 
}); 
});

任何建議歡迎。

感謝

來源

2014-04-22 PawelK

一般來說，它應該可以工作，但它不會。我已經報告錯誤[這裏]（https://github.com/highslide-software/highcharts.com/issues/2942）。這裏是試圖讓它工作的演示：http://jsfiddle.net/8jmV6/3/ –

wielkie dzieki Pawel！ – PawelK

這並不實際工作，你只需要特別小心這兩個主要系列和鑽系列的格式：

$('#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會很有意義（使日期可讀，並以實際的方式返回實際的series/drilldown名稱），但我沒有將它包含在這個小提琴中。

來源

2014-12-05 20:39:40

在列範圍上鑽取

回答

相關問題