日付のあるデュアル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

あなたはラインシリーズは、第2の軸に関連することを指定する必要があります。

yAxis: 1, 

更新フィドル：

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