javascript - 使用 mx + b 在 Highcharts 中绘制回归线

标签 javascript highcharts statistics linear-regression

我正在尝试根据 mx+b(斜率 + y 轴截距)公式在 Highcharts 中绘制线性回归线,使用 regression-js生成回归公式。

我遇到的问题是 Highcharts 似乎想要 [[x1, y1], [x2, y2]] 格式的回归线,但我不一定能开始并以斜率和 y 轴截距结束。

所以: 是否可以根据斜率在 Highcharts 中画一条线?或者是否有一个 JS 回归库可以输出 [[x1, y1], [x2, y2]] 格式的行,基于数据数组,就像我在下面得到的那样?

我现在正在做什么:

data = [[11.6,14.7],[12.2,15.9],[10.7,14.8],[14,11.7],[12.5,13.2],[10,11.3],[10.1,11],[13.5,19.1]];

slope = regression('linear', data); // result: slope.equation = [slope, y-intercept]

$('#scatter').highcharts({
    chart: {
        type: 'scatter',
        zoomType: 'xy'
    },
    plotOptions: {
        scatter: {
            marker: {
                radius: 5,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(100,100,100)'
                    }
                }
            },
            states: {
                hover: {
                    marker: {
                        enabled: false
                    }
                }
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: '{point.x} cm, {point.y} kg'
            }
        }
    },
    series: [
        {
            type: 'line',
            name: 'Regression Line',
            data: [[0, 0], [5, 4.51]], // You see the problem here: I've got mx + b and this wants x1 y1 x2 y2
            marker: {
                enabled: false
            },
            states: {
                hover: {
                    lineWidth: 0
                }
            },
            enableMouseTracking: false
        },
        {
        name: 'Water Temperature vs. Air Temperature',
        color: 'rgba(119, 152, 191, .5)',
        data: data
    }]
});

最佳答案

很好的问题。这是我的做法:

var data = [[11.6,14.7],[12.2,15.9],[10.7,14.8],[14,11.7],[12.5,13.2],[10,11.3],[10.1,11],[13.5,19.1]];

var ymxb = regression('linear', data); 

// get the slope and x intercept from the equation
var m = ymxb.equation[0], b = ymxb.equation[1];

// create array of x values
var xs = [];
data.forEach(function(d){
    xs.push(d[0]);
});

// get the max and min values of x, and calculate 
// the corresponding y value using that x, m, and b
var x0 = Math.min.apply(null, xs), 
    y0 = m*x0 + b;
var xf = Math.max.apply(null, xs), 
    yf = m*xf + b;

...

// that gives you your two coordinates
series: [
    {
        type: 'line',
        name: 'Regression Line',
        data: [[x0, y0], [xf, yf]],

...

结果:

enter image description here

JSFiddle

关于javascript - 使用 mx + b 在 Highcharts 中绘制回归线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33555243/

相关文章:

javascript - 使用 foreach 时重复表 id

r - 在向量中的点内插值

math - 如何生成对非对角线元素有约束的伪随机正定矩阵?

node.js - 如何将静态文件预加载或安装到 Highchart 的导出服务器中?

javascript - 环绕 Highcharts 点

javascript - 访问 Highcharts 中 dataLabels.formatter 函数中的另一个列表

python - 反向 Box-Cox 变换

javascript - NestJS JWT 模块问题

javascript - 将字符串作为在 javascript 中创建的动态按钮的 onClick 参数传递

php - 星级评定系统,类似于亚马逊