HighCharts雙x軸百分比和日期

我有一個要求在條形圖上顯示完成百分比，並將每個項目的開始日期顯示爲折線圖。

現在，爲了實現這一點，我創建了一個雙y軸的圖表。
1軸-1顯示條形圖的進度。最大值爲100 - 避免顯示大於100的值。
2軸2以折線圖顯示開始日期

使用此設置，我期望當值設置爲最後時100和輔助軸進行調整。相反，酒吧停在大約3/4的路線上，折線圖實際上標繪出超過條形圖100％的點。

Following jsfiddle would display the prominently.

HighCharts雙x軸百分比和日期

var completionChart = $('#Chart').highcharts({ 
     title: { 
      text: 'Project QUAL Status - SD/uSD' 
     }, 
     xAxis: { 
      categories: window.xCategories, 
      crosshair: true 
     }, 
     yAxis: [{ 
      title: { 
       text: '% Completion' 
      }, 
      min: 0, 
      max: 100, 
      labels: { 
       enabled: false 
      }, 
      gridLineWidth: 0 
     }, { 
      "title": { 
       "text": "Start Date" 
      }, 
      type: 'datetime', 
      opposite: true 
     }], 
     tooltip: { 
      backgroundColor: 'rgba(255,255,255,1)', 
      borderRadius: 10, 
      borderWidth: 1, 
      borderColor: '#000000', 
      useHTML: true, 
      positioner: function() { 
       return { y: 317 }; 
      }, 
      shared: false, 
      style: { 
       padding: 5 
      } 
     }, 
     plotOptions: { 
      bar: { 
       groupPadding: 0 
      }, 
      series: { 
       dataLabels: { 
        enabled: true, 
        align: 'left', 
        overflow: 'none', 
        style: { 
         fontWeight: 'bold', 
         color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
        }, 
        formatter: function() { 
         if (this.y <= 100) 
          return Math.round(this.y) + '%'; 
        } 
       }, 
       cursor: 'pointer' 
      } 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
      index: 0, 
      name: 'Completion %', 
      data: completionpercent, 
      showInLegend: false, 
      type: 'bar' 
     }, { 
      data: startDate, 
      type: 'spline', 
      name: 'Start Date', 
      connectNulls: true, 
      color: '#2F4367', 
      lineWidth: 3, 
      yAxis: 1, 
      index: 1, 
     }] 
    });

圖表的寬度被設定和而不影響應用程序的整體設計我不能改變它。改變寬度有時候會有所幫助，但我想要一個不依賴於圖表寬度的解決方案。

來源

2016-09-15 pratik