与双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/