首页 文章

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

提问于
浏览
0

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

现在,为了达到这个目的,我创建了一个双y轴图表 .
1 - 轴-1显示条形图的进度 . 最大值: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,
        }]
    });

图表的宽度已设置,我无法在不影响应用程序整体设计的情况下进行更改 . 更改宽度确实有时会有所帮助,但我想要一个不依赖于图表宽度的解决方案 .

1 回答

相关问题