與雙Y軸與日期的高圖

Question

我試圖顯示項目的詳細信息。 我想要在條形圖上顯示完成百分比，並將每個項目的開始日期顯示爲折線圖。

現在，爲了實現這一點，我創建了一個雙y軸的圖表。
1 - 軸-1顯示了條形圖進步
2 - 軸-2應該顯示的開始日期與折線圖

條形圖工作正常。即使折線圖在沒有雙軸的情況下也能正常工作。但是，當我將它們加在一起時，折線圖就消失了。我試着改變折線圖上的日期以獲得隨機數字 - 這也適用。
任何人都知道如何使日期在雙軸圖表上工作。
jsfiddle

var projectDetails = 
    [{ 
     "name": "+PS8039", 
     "startDate": "2016-02-01", 
     "finishDate": "2016-04-01" 
    }, { 
     "name": "+PS8039", 
     "startDate": "2016-01-02", 
     "finishDate": "2016-08-02" 
    }, { 
     "name": "+PS8039", 
     "startDate": "2016-03-08", 
     "finishDate": "2016-08-08" 
    }, { 
     "name": "+PS8039", 
     "startDate": "2016-04-11", 
     "finishDate": "2016-09-11" 
    }, { 
     "name": "+PS8039", 
     "startDate": "2016-05-13", 
     "finishDate": "2016-12-13" 
    }, { 
     "name": "+PS8039", 
     "startDate": "2016-01-15", 
     "finishDate": "2016-04-15" 
    }, { 
     "name": "+PS8039", 
     "startDate": "2016-02-25", 
     "finishDate": "2016-08-25" 
    }, { 
     "name": "+PS8039", 
     "startDate": "2016-03-03", 
     "finishDate": "2016-07-03" 
    }, { 
     "name": "+PC2E", 
     "startDate": "2016-04-07", 
     "finishDate": "2016-05-31" 
    }, { 
     "name": "+PC2E", 
     "startDate": "2016-05-16", 
     "finishDate": "2016-09-01" 
    }]; 

$(function() { 
    var xCategories = new Array(); 
    var completionpercent = new Array(); 
    var startdates = new Array(); 
    var finishdates = new Array(); 

    for(var i = 0; i< projectDetails.length; i++){ 
     xCategories[i] = projectDetails[i].name; 
     startdates[i] = moment(projectDetails[i].startDate).format('x'); 
     finishdates[i] = projectDetails[i].finishDate; 

     completionpercent[i] = ((Date.now() - Date.parse(projectDetails[i].startDate)) 
           /(Date.parse(projectDetails[i].finishDate) - Date.parse(projectDetails[i].startDate))) 
           *100 ;   

    } 

    $('#Chart').highcharts({ 
     colors: ['#2C5898'], 
     title: { 
      text: 'Project Completion' 
     }, 
     legend: { 
      enabled: false 
     }, 
     xAxis: [{ 
      categories: xCategories, 
     crosshair: true 
     }], 
     yAxis:[{ 
      title: { 
       text: '% Completion'    
      }, 
      max: 110 
     }, 
       { 
        "title": { 
       "text": "Start Dates" 
      }, 
      opposite: true 
       } 
     ], 
     plotOptions: { 
      bar: { 
       groupPadding: 0, 
       zones: [{ 
        value: 100 
       },{ 
        color: { 
          linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, 
          stops: [ 
           [0, '#cc0000'], 
           [1, '#ff8080'] 
          ] 
         } 
       }] 
      } 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
     name: 'Start Dates', 
     type: 'line', 
     data: startdates 
     },{ 
      name: 'Completion %', 
      type: 'bar', 
      data: completionpercent 
     }] 
    }); 
}); 

Answer 1

您需要指定行系列涉及第二軸：

yAxis: 1, 

更新小提琴：

• https://jsfiddle.net/jlbriggs/4e6edy7t/2/