Question

我要求在条形图上显示完成百分比，并将每个项目的开始日期显示为折线图。

现在，为了达到这个目的，我创建了一个双y轴图表。
1 - 轴-1显示条形图的进度。最大值：100 - 避免显示值＆gt; 100.
2 - 轴-2用折线图显示开始日期

通过这个设置，我希望当值为100并且辅助轴在其中进行调整时，条形图一直到最后。相反，酒吧在大约3/4处停止，折线图实际上绘制了超过条形图100％的点。

Following jsfiddle would display the prominently.

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

HighCharts双x轴，包含百分比和日期

1 个答案: