HighCharts双x轴,带百分比和日期

jgwigjjp  于 2023-06-06  发布在  Highcharts
关注(0)|答案(1)|浏览(482)

我有一个要求,以显示与这些项目的每个项目的开始日期为折线图的条形图完成百分比。
现在,为了实现这一点,我创建了一个具有双y轴的图表。
1轴-1以条形图显示进度。max:100 -避免显示> 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,
        }]
    });

图表的宽度是设置好的,我不能在不影响应用程序整体设计的情况下更改它。更改宽度有时确实有帮助,但我希望有一个不依赖于图表宽度的解决方案。

9avjhtql

9avjhtql1#

您需要将alignTicks属性设置为false以实现此目的。
参考文献:

相关问题