highcharts甘特顯示爲條形而不是線條

Question

我想製作一個圖表，在某個時間間隔內在水平條上顯示。 我設法做到了這一點，但我被卡在它如何顯示它。 現在，每個分段在段的開始和結束處顯示爲帶有2個分隔符（看起來像是圓圈）的行。 由於圖中有很多事件，我無法區分事件，大多數情況下，我會得到由分隔符/圓圈創建的連續欄。

我想要做的就是將每個分段表示爲一條垂直線，它將與沒有分隔符的事件持續時間一樣寬，就像我可以區分這些活動一樣。

我在網上搜了很多，試圖改變劇情顯示類型，但沒有幫助。

我的代碼是：

var tasks = [{ 
       name:'336', 
       intervals:[{from:1393565701000,to:1393565762000},{from:1393565776000,to:1393565829000},{from:1393565841000,to:1393565881000},{from:1393565892000,to:1393565958000},{from:1393565982000,to:1393566094000},{from:1393566112000,to:1393566120000},{from:1393566186000,to:1393566232000},{from:1393566244000,to:1393566312000},{from:1393566320000,to:1393566398000},{from:1393566415000,to:1393566490000},{from:1393566509000,to:1393566555000},{from:1393566564000,to:1393566625000},{from:1393566637000,to:1393566739000},{from:1393566755000,to:1393566841000},{from:1393566869000,to:1393566971000},{from:1393567013000,to:1393567091000},{from:1393567102000,to:1393567128000},{from:1393567147000,to:1393567233000},{from:1393567247000,to:1393567342000},{from:1393567360000,to:1393567438000},{from:1393567455000,to:1393567477000},{from:1393567503000,to:1393567550000},{from:1393567562000,to:1393567614000},{from:1393567641000,to:1393567723000},{from:1393567779000,to:1393567869000},{from:1393567883000,to:1393567968000},{from:1393567984000,to:1393567997000},{from:1393568005000,to:1393568058000},{from:1393568078000,to:1393568124000},{from:1393568148000,to:1393568246000},{from:1393568260000,to:1393568324000},{from:1393568351000,to:1393568437000},{from:1393568449000,to:1393568546000},{from:1393568557000,to:1393568640000},{from:1393568653000,to:1393568692000},{from:1393568721000,to:1393568787000},{from:1393568817000,to:1393568835000},{from:1393568860000,to:1393568903000},{from:1393568923000,to:1393569009000},{from:1393569023000,to:1393569112000},{from:1393569132000,to:1393569196000},{from:1393569235000,to:1393569304000},{from:1393569319000,to:1393569335000},{from:1393569373000,to:1393569384000},{from:1393569709000,to:1393569789000},{from:1393569813000,to:1393569903000},{from:1393569916000,to:1393569979000},{from:1393570007000,to:1393570060000},{from:1393570086000,to:1393570090000},{from:1393570108000,to:1393570137000},{from:1393570153000,to:1393570183000},{from:1393570207000,to:1393570275000},{from:1393570291000,to:1393570338000},{from:1393570351000,to:1393570488000},{from:1393570522000,to:1393570584000},{from:1393570597000,to:1393570636000},{from:1393570661000,to:1393570776000},{from:1393570826000,to:1393570839000},{from:1393570864000,to:1393570957000},{from:1393570972000,to:1393571064000},{from:1393571079000,to:1393571155000},{from:1393571175000,to:1393571255000},{from:1393571268000,to:1393571363000},{from:1393571449000,to:1393571560000},{from:1393571589000,to:1393571610000},{from:1393571659000,to:1393571679000},{from:1393571707000,to:1393571733000},{from:1393571755000,to:1393571814000},{from:1393571830000,to:1393571883000},{from:1393571897000,to:1393571932000},{from:1393571948000,to:1393571959000},{from:1393571972000,to:1393572004000},{from:1393572013000,to:1393572082000},{from:1393572103000,to:1393572131000},{from:1393572153000,to:1393572214000},{from:1393572221000,to:1393572236000},{from:1393572247000,to:1393572261000},{from:1393572276000,to:1393572294000},{from:1393572308000,to:1393572325000},{from:1393572339000,to:1393572363000},{from:1393572419000,to:1393572442000},{from:1393572458000,to:1393572498000},{from:1393572509000,to:1393572551000},{from:1393572564000,to:1393572574000},{from:1393572587000,to:1393572612000},{from:1393572621000,to:1393572657000},{from:1393572672000,to:1393572678000},{from:1393572689000,to:1393572708000},{from:1393572721000,to:1393572805000},{from:1393572828000,to:1393572848000},{from:1393572871000,to:1393572876000},{from:1393572891000,to:1393572921000},{from:1393572931000,to:1393572957000},{from:1393572977000,to:1393572990000},{from:1393573004000,to:1393573046000},{from:1393573057000,to:1393573082000},{from:1393573303000,to:1393573307000},{from:00,to:1393573345000},{from:1393573387000,to:1393573399000},{from:1393573410000,to:1393573415000},{from:1393573435000,to:1393573483000},{from:1393573501000,to:1393573566000},{from:1393573580000,to:1393573593000},{from:1393573601000,to:1393573628000},{from:1393573641000,to:1393573651000},{from:1393573659000,to:1393573690000},{from:1393573704000,to:1393573716000},{from:1393573726000,to:1393573791000},{from:1393573805000,to:1393573899000},{from:1393573913000,to:1393573924000},{from:1393573936000,to:1393573938000},{from:1393573957000,to:1393573973000},{from:1393573989000,to:1393574021000},{from:1393574047000,to:1393574056000},{from:1393574070000,to:1393574077000},{from:1393574094000,to:1393574125000},{from:1393574167000,to:1393574212000},{from:1393574236000,to:1393574241000},{from:1393574253000,to:1393574277000},{from:1393574371000,to:1393574381000},{from:1393574400000,to:1393574428000},{from:1393574460000,to:1393574493000},{from:1393574515000,to:1393574535000},{from:1393574547000,to:1393574584000},{from:1393574614000,to:1393574624000},{from:1393574636000,to:1393574681000},{from:1393574691000,to:1393574713000},{from:1393574725000,to:1393574758000},{from:1393574788000,to:1393574819000},{from:1393574850000,to:1393574861000},{from:1393574876000,to:1393574883000},{from:1393574900000,to:1393574908000},{from:1393574940000,to:1393574951000},{from:1393574967000,to:1393575040000},{from:1393575056000,to:1393575078000},{from:1393575096000,to:1393575121000},{from:1393575137000,to:1393575189000},{from:1393575205000,to:1393575261000},{from:1393575278000,to:1393575317000},{from:1393575329000,to:1393575342000},{from:1393575389000,to:1393575405000},{from:1393575446000,to:1393575475000},{from:1393575490000,to:1393575542000},{from:1393575558000,to:1393575570000},{from:1393575596000,to:1393575626000},{from:1393575644000,to:1393575689000},{from:1393575701000,to:1393575741000},{from:1393575763000,to:1393575774000},{from:1393575789000,to:1393575818000},{from:1393575854000,to:1393575860000},{from:1393575889000,to:1393575905000},{from:1393575918000,to:1393575930000},{from:1393575942000,to:1393575962000},{from:1393575983000,to:1393576024000},{from:1393576040000,to:1393576059000},{from:1393576073000,to:1393576127000},{from:1393576142000,to:1393576187000},{from:1393576213000,to:1393576281000},{from:1393576310000,to:1393576337000},{from:1393576352000,to:1393576416000},{from:1393576458000,to:1393576478000},{from:1393576490000,to:1393576519000},{from:1393576529000,to:1393576579000},{from:1393576592000,to:1393576600000},{from:1393576609000,to:1393576660000},{from:1393576670000,to:1393576689000},{from:1393576703000,to:1393576721000},{from:1393576759000,to:1393576780000},{from:1393576787000,to:1393576829000},{from:1393577212000,to:1393577253000},{from:1393577273000,to:1393577275000},{from:1393577292000,to:1393577354000},{from:1393577372000,to:1393577393000},{from:1393577407000,to:1393577433000},{from:1393577463000,to:1393577479000},{from:1393577501000,to:1393577521000},{from:1393577536000,to:1393577601000},{from:1393577622000,to:1393577685000},{from:1393577701000,to:1393577711000},{from:1393577736000,to:1393577784000},{from:1393577798000,to:1393577819000},{from:1393577860000,to:1393577883000},{from:1393577901000,to:1393577994000},{from:1393578032000,to:1393578033000},{from:1393578056000,to:1393578078000},{from:1393578094000,to:1393578159000},{from:1393578172000,to:1393578189000},{from:1393578204000,to:1393578284000},{from:1393578311000,to:1393578356000},{from:1393578367000,to:1393578437000},{from:1393578449000,to:1393578509000},{from:1393578519000,to:1393578549000},{from:1393578572000,to:1393578637000},{from:1393578649000,to:1393578657000},{from:1393578674000,to:1393578716000},{from:1393578728000,to:1393578793000},{from:1393578808000,to:1393578879000},{from:1393578891000,to:1393578908000},{from:1393578922000,to:1393578949000},{from:1393578961000,to:1393579006000},{from:1393579031000,to:1393579045000},{from:1393579068000,to:1393579108000},{from:1393579122000,to:1393579167000},{from:1393579187000,to:1393579216000},{from:1393579225000,to:1393579257000},{from:1393579275000,to:1393579290000},{from:1393579305000,to:1393579397000},{from:1393579418000,to:1393579477000},{from:1393579490000,to:1393579520000},{from:1393579532000,to:1393579571000},{from:1393579583000,to:1393579589000},{from:1393579651000,to:1393579667000},{from:1393579677000,to:1393579690000},{from:1393579712000,to:1393579729000},{from:1393579743000,to:1393579764000},{from:1393583314000,to:1393583355000},{from:1393583365000,to:1393583373000},{from:1393583388000,to:1393583485000},{from:1393583515000,to:1393583534000},{from:1393583562000,to:1393583591000},{from:1393583604000,to:1393583634000},{from:1393583659000,to:1393583675000},{from:1393583691000,to:1393583887000},{from:1393583914000,to:1393583932000},{from:1393583948000,to:1393583964000},{from:1393583987000,to:1393583991000},{from:1393584039000,to:1393584085000},{from:1393584107000,to:1393584133000},{from:1393584151000,to:1393584165000},{from:1393584178000,to:1393584270000},{from:1393584288000,to:1393584342000},{from:1393584353000,to:1393584367000},{from:1393584385000,to:1393584440000},{from:1393584459000,to:1393584490000},{from:1393584500000,to:1393584516000},{from:1393584526000,to:1393584575000},{from:1393584590000,to:1393584664000},{from:1393584684000,to:1393584749000},{from:1393584762000,to:1393584827000},{from:1393584843000,to:1393584871000},{from:1393584908000,to:1393584960000},{from:1393584970000,to:1393585003000},{from:1393585014000,to:1393585034000},{from:1393585063000,to:1393585121000},{from:1393585139000,to:1393585148000},{from:1393585178000,to:1393585249000},{from:1393585258000,to:1393585294000},{from:1393585304000,to:1393585396000},{from:1393585414000,to:1393585458000},{from:1393585471000,to:1393585489000},{from:1393585517000,to:1393585582000},{from:1393585613000,to:1393585634000},{from:1393585648000,to:1393585661000},{from:1393585680000,to:1393585712000},{from:1393585724000,to:1393585740000},{from:1393585752000,to:1393585769000},{from:1393585785000,to:1393585825000},{from:1393585829000,to:1393585859000},{from:1393585907000,to:1393585933000},{from:1393585966000,to:1393585999000},{from:1393586054000,to:1393586088000},{from:1393586096000,to:1393586120000},{from:1393586146000,to:1393586207000},{from:1393586238000,to:1393586270000},{from:1393586281000,to:1393586282000},{from:1393586293000,to:1393586299000},{from:1393586316000,to:1393586318000},{from:1393586350000,to:1393586360000},{from:1393586431000,to:1393586435000},{from:1393586504000,to:1393586515000},{from:1393586536000,to:1393586563000},{from:1393586575000,to:1393586593000},{from:1393586625000,to:1393586708000},{from:1393586727000,to:1393586736000},{from:1393586757000,to:1393586803000},{from:1393586824000,to:1393586843000},{from:1393586881000,to:1393586890000},{from:1393586916000,to:1393587008000},{from:1393587028000,to:1393587040000},{from:1393587066000,to:1393587103000},{from:1393587116000,to:1393587133000},{from:1393587170000,to:1393587191000},{from:1393587205000,to:1393587246000},{from:1393587263000,to:1393587356000},{from:1393587651000,to:1393587693000},{from:1393587713000,to:1393587729000},{from:1393587749000,to:1393587812000},{from:1393587825000,to:1393587879000},{from:1393587891000,to:1393587966000},{from:1393587992000,to:1393588025000},{from:1393588045000,to:1393588078000},{from:1393588090000,to:1393588092000},{from:1393588107000,to:1393588137000},{from:1393588148000,to:1393588215000},{from:1393588238000,to:1393588307000},{from:1393588329000,to:1393588388000},{from:1393588398000,to:1393588446000},{from:1393588465000,to:1393588514000},{from:1393588536000,to:1393588574000},{from:1393588589000,to:1393588605000},{from:1393588619000,to:1393588688000},{from:1393588729000,to:1393588821000},{from:1393588834000,to:1393588843000},{from:1393588859000,to:1393588897000},{from:1393588912000,to:1393588921000},{from:1393588937000,to:1393588981000},{from:1393588991000,to:1393589011000},{from:1393589032000,to:1393589062000},{from:1393589076000,to:1393589112000},{from:1393589128000,to:1393589129000},{from:1393589151000,to:1393589177000},{from:1393589190000,to:1393589222000},{from:1393589233000,to:1393589261000},{from:1393589274000,to:1393589315000},{from:1393589335000,to:1393589379000},{from:1393589391000,to:1393589421000},{from:1393589628000,to:1393589718000},{from:1393589736000,to:1393589784000},{from:1393589796000,to:1393589839000},{from:1393589850000,to:1393589935000},{from:1393589952000,to:1393589962000},{from:1393589973000,to:1393589990000},{from:1393590973000,to:1393591009000},{from:1393591020000,to:1393591080000},{from:1393591089000,to:1393591153000},{from:1393591161000,to:1393591214000},{from:1393591222000,to:1393591262000},{from:1393591304000,to:1393591396000},{from:1393591408000,to:1393591416000},{from:1393591427000,to:1393591430000},{from:1393591445000,to:1393591498000},{from:1393591507000,to:1393591562000},{from:1393591571000,to:1393591585000},{from:1393591598000,to:1393591658000},{from:1393591679000,to:1393591720000},{from:1393591739000,to:1393591764000},{from:1393591772000,to:1393591795000},{from:1393591802000,to:1393591900000},{from:1393591913000,to:1393592009000},{from:1393592023000,to:1393592066000},{from:1393592073000,to:1393592109000},{from:1393592118000,to:1393592196000},{from:1393592210000,to:1393592248000},{from:1393592259000,to:1393592334000},{from:1393592345000,to:1393592355000},{from:1393592416000,to:1393592423000},{from:1393592440000,to:1393592513000},{from:1393592521000,to:1393592545000},{from:1393592556000,to:1393592602000},{from:1393592642000,to:1393592643000},{from:1393592661000,to:1393592679000},{from:1393592704000,to:1393592739000},{from:1393592749000,to:1393592839000},{from:1393592853000,to:1393592945000},{from:1393592960000,to:1393593026000},{from:1393593039000,to:1393593120000},{from:1393593134000,to:1393593158000},{from:1393593173000,to:1393593199000},{from:1393593206000,to:1393593234000},{from:1393593261000,to:1393593278000},{from:1393593287000,to:1393593290000},{from:1393593340000,to:1393593370000},{from:1393593382000,to:1393593437000},{from:1393593449000,to:1393593505000},{from:1393593526000,to:1393593580000},{from:1393593599000,to:1393593619000},{from:1393593634000,to:1393593679000},{from:1393593689000,to:1393593726000},{from:1393593737000,to:1393593779000},{from:1393593795000,to:1393593832000},{from:1393593840000,to:1393593874000},{from:1393593889000,to:1393593933000},{from:1393593950000,to:1393593990000},{from:1393594000000,to:1393594005000},{from:1393594022000,to:1393594064000},{from:1393594082000,to:1393594140000},{from:1393594169000,to:1393594184000},{from:1393594195000,to:1393594224000},{from:1393594232000,to:1393594308000},{from:1393594316000,to:1393594337000},{from:1393594344000,to:1393594398000},{from:1393594408000,to:1393594449000},{from:1393594460000,to:1393594485000},{from:1393594492000,to:1393594584000},{from:1393594601000,to:1393594636000},{from:1393594651000,to:1393594668000},{from:1393594874000,to:1393594933000},{from:1393594945000,to:1393594997000},{from:1393595007000,to:1393595098000},{from:1393595109000,to:1393595167000},{from:1393595174000,to:1393595238000},{from:1393595268000,to:1393595281000},{from:1393595290000,to:1393595382000},{from:1393595397000,to:1393595414000},{from:1393595427000,to:1393595452000},{from:1393595471000,to:1393595534000},{from:1393595548000,to:1393595577000},{from:1393595604000,to:1393595651000},{from:1393595674000,to:1393595710000},{from:1393595719000,to:1393595743000},{from:1393595752000,to:1393595811000},{from:1393595827000,to:1393595889000},{from:1393596027000,to:1393596043000},{from:1393596057000,to:1393596104000},{from:1393596112000,to:1393596120000},{from:1393596140000,to:1393596182000},{from:1393596191000,to:1393596222000},{from:1393596235000,to:1393596243000},{from:1393596281000,to:1393596306000},{from:1393596328000,to:1393596410000},{from:1393596429000,to:1393596505000},{from:1393596538000,to:1393596568000},{from:1393596623000,to:1393596680000},{from:1393596696000,to:1393596740000},{from:1393597205000,to:1393597285000},{from:1393597296000,to:1393597349000},{from:1393597364000,to:1393597455000},{from:1393597470000,to:1393597486000},{from:1393597500000,to:1393597506000},{from:1393597518000,to:1393597569000},{from:1393597591000,to:1393597650000},{from:1393597663000,to:1393597695000},{from:1393597704000,to:1393597743000},{from:1393597762000,to:1393597763000},{from:1393597777000,to:1393597789000},] 
       }]; 


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.setOptions({ 
     global: { 
      timezoneOffset: -2 * 60 
     }, 
     colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'], 
     chart: { 
      backgroundColor: { 
       linearGradient: [0, 0, 500, 500], 
       stops: [ 
        [0, 'rgb(255, 255, 255)'], 
        [1, 'rgb(240, 240, 255)'] 
       ] 
      } 
    , 
      borderWidth: 2, 
      plotBackgroundColor: 'rgba(255, 255, 255, .9)', 
      plotShadow: true, 
      plotBorderWidth: 1 
     } 
    }); 

// create the chart 
var chart = new Highcharts.Chart({ 

    chart: { 
     zoomType: 'x', 
     spacingRight: 20, 
     renderTo: 'container336', 
     type: 'line', 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false 
    }, 

    title: { 
     text: 'Extension: qweqweq' 
    }, 
      credits: { 
      enabled: false 
     }, 

    xAxis: { 
     type: 'datetime' 

    }, 

    yAxis: { 
     tickInterval: 1, 
     lineColor: '#FF0000', 
     labels: { 
      formatter: function() { 
       if (tasks[this.value]) { 
        return tasks[this.value].name; 
       } 
      } 
     }, 
     startOnTick: false, 
     endOnTick: false, 
     title: { 
      text: 'Calls' 
     } 

    }, 


    legend: { 
     enabled: false 
    }, 

    tooltip: { 
     formatter: function() { 
      return ((this.point.options.to-this.point.options.from)/1000) + ' seconds'; 
     } 
    }, 

    plotOptions: { 
     series: { 
      turboThreshold:20000 
     }, 

     line: { 
      lineWidth: 1, 
      stacking: 'null', 
      dataLabels: { 
       enabled: true, 
       align: 'left', 
       formatter: function() { 
        return this.point.options && this.point.options.label; 
       } 
      } 
     } 
    }, 

    series: series, 
    dashStyle: 'shortdot' 

我還做了一個更好地瞭解的jsfiddle這裏可視解釋：

http://jsfiddle.net/SwCnP/

任何IDEEA或解決方案的高度讚賞。我真的被這個困住了。

感謝

Answer 1

最後，我設法做圖，但不使用highcharts。 我使用了Rgraph多事件甘特圖書館，並能夠根據我的確切需要格式化圖表。 感謝您的幫助，至少答案促使我忘記了使用highcharts。

Answer 2

請大家看一下例子

• http://jsfiddle.net/highcharts/LnAq3/2/
• http://jsfiddle.net/r6emu/2034/
• http://jsfiddle.net/LnAq3/11/grouping:false