HighCharts雙X軸，帶有百分比和日期

Question

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

現在，為實現此目的，我創建了一個具有雙y軸的圖表。
1-軸1顯示條形圖的進度。 最大值：100-避免顯示值> 100。
2-軸2以折線圖顯示開始日期

通過此設置，我希望當值是100且第二根軸在其中調整時，條形圖會一直走到最后。 相反，條形圖在大約3/4處停止，折線圖實際繪制的點超出條形圖的100％。

跟隨jsfiddle將會突出顯示。

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,
        }]
    });

圖表的寬度已設置，在不影響應用程序整體設計的情況下我無法更改它。 更改寬度有時會有所幫助，但是我想要一個不依賴於圖表寬度的解決方案。

Answer 1

您需要將alignTicks屬性設置為false才能實現此目的。

更新的小提琴：

• https://jsfiddle.net/jlbriggs/mup6vL8d/2/

參考：

• http://api.highcharts.com/highcharts/chart.alignTicks