在Chart.js中画一条线直到网格的尽头

Question

我目前正在使用两个数据集绘制Chart.js散点图。第一个是笛卡尔网格上的点的集合，后者应该是一条直线，将高于和低于某个阈值的值相除。

问题在于，直到网格的末端（在X轴上）才绘制直线，而且我不知道该怎么做。

接下来，您将找到上述问题的屏幕快照以及我当前正在使用的代码片段。您会注意到，我尝试将线延长到比最远点（在X轴上）更远（6％），但这没用。

    var ctx = $('#plot-id');
    var data = some_data;

    var max_x = Math.max.apply(Math, data.map(function(o){return o.x;}));
    var min_x = Math.min.apply(Math, data.map(function(o){return o.x;}));
    var max_y = Math.max.apply(Math, data.map(function(o){return o.y;}));
    var min_y = Math.min.apply(Math, data.map(function(o){return o.y;}));

    var scatterChart = new Chart(ctx, {
        type: 'scatter',
        data: {
            datasets: [{
                // Colors cut
                label: 'scatter',
                data: data,
                datalabels: {
                    display: false
                }
            }, {
                // Colors cut
                fill: false,
                label: 'line',
                data: [{
                    x: 0,
                    y: 0
                }, {
                    x: Math.max.apply(Math,data.map(function(o){return Math.ceil(o.x * 1.06);})),
                    y: Math.max.apply(Math,data.map(function(o){return o.y;}))/2
                }],
                datalabels: {
                    display: false
                },
                lineTension: 0,
                pointRadius: 0,
                showLine: true,
                type: 'line',
                xAxisID : 'red-line'
            }],
        },
        options: {
            animation: {
                duration: 0
            },
            hover: {
                animationDuration: 0
            },
            responsiveAnimationDuration: 0,
            layout: {
                padding:{
                    top: 15,
                    left: 5,
                    bottom: 15,
                    right: 5
                }
            },
            legend: {
                display: displayLegend
            },
            responsive: responsive,
            title: {
                // Colors cut
                text: title
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        color: xGridLinesColor,
                        drawTicks: false,
                        lineWidth: xGridLinesWidth,
                        zeroLineColor: xGridZeroLineColor,
                        zeroLineWidth: xGridZeroLineWidth
                    },
                    id: 'red-line',
                    position: xGridLabelPosition,
                    scaleLabel: {
                        display: xScaleLabelDisplay,
                        fontColor: xScaleLabelColor,
                        labelString: xLabel
                    },
                    type: 'linear',
                    ticks: {
                        fontColor: xTicksColor,
                        padding: 10
                    }
                }],
                yAxes: [{
                    gridLines: {
                        color: yGridLinesColor,
                        drawTicks: false,
                        lineWidth: yGridLinesWidth,
                        zeroLineColor: yGridZeroLineColor,
                        zeroLineWidth: yGridZeroLineWidth
                    },
                    id: id,
                    position: yGridLabelPosition,
                    scaleLabel: {
                        display: yScaleLabelDisplay,
                        fontColor: yScaleLabelColor,
                        labelString: yLabel
                    },
                    ticks: {
                        callback: function(value) {
                            return value < 1 ? (value * 100) + '%' : value; 
                        },
                        fontColor: yTicksColor,
                        padding: 10
                    }
                }]
            }
        }
    });
});

Chart.js的版本是2.7.2

谢谢您的时间。