我将使用什么JavaScript代码绘制趋势线？

假设我将在折线图上绘制以下值（这些是值而不是坐标-坐标由我的软件计算，如下所示）：

如何将这些值转换为一组趋势线值/坐标？（顺便说一句，除了学校水平之外，我真的没有任何数学专业知识——所以请不要使用花哨的数学术语！）

添加更多细节：这些是一组在500像素空间（HTML5画布标记）上等距分布的值。因此，X坐标是为您计算的，结果如下（图表两侧的35像素边距）：[35121207293379465]

这些只是X坐标，Y坐标是根据比例、图表高度和数值自动计算的。下面是我的软件使用以下代码创建的示例折线图：

<canvas id="cvs" width="500" height="250">
    [No canvas support]
</canvas>

<script>
    line = new RGraph.Line({
        id: 'cvs',
        data: [4,4,3,2,5,5],
        options: {
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
            shadow: false,
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            xaxis: false,
            yaxis: false
        }
    }).draw()
</script>

所以你已经知道了：

X坐标是为您计算的。。。（35像素边距）：35121207293379465

生成的结果：

[[35,71]，[121,71]，[207107]，[293143]，[379,35]，[465,35]

这只是一个

[x，y]

点列表

从中我们可以删除已知的X（为我们计算），我们将得到：

71、71、107、143、35、35

我们可以看到具有原始输入的模式

4,4,3,2,5,5

获得具有该序列的配方的蛋糕：

35+（5-y）*36

---

剩下的就是把这个公式写成代码：

canvas=document.getElementById（'canvas'）；
canvas.width=canvas.height=500；
ctx=canvas.getContext（'2d'）；
x=35
趋势线=[]
绘图=[4,4,3,2,5,5]
plot.forEach（函数（值）{
y=35+（5-值）*36
ctx.lineTo（x，y）；
趋势线推送（[x，y]）
x+=86
});
ctx.stroke（）；
log（JSON.stringify（趋势线））

所以您已经知道：

X坐标是为您计算的。。。（35像素边距）：35121207293379465

生成的结果：

[[35,71]，[121,71]，[207107]，[293143]，[379,35]，[465,35]

这只是一个

[x，y]

点列表

从中我们可以删除已知的X（为我们计算），我们将得到：

71、71、107、143、35、35

我们可以看到具有原始输入的模式

4,4,3,2,5,5

获得具有该序列的配方的蛋糕：

35+（5-y）*36

---

剩下的就是把这个公式写成代码：

canvas=document.getElementById（'canvas'）；
canvas.width=canvas.height=500；
ctx=canvas.getContext（'2d'）；
x=35
趋势线=[]
绘图=[4,4,3,2,5,5]
plot.forEach（函数（值）{
y=35+（5-值）*36
ctx.lineTo（x，y）；
趋势线推送（[x，y]）
x+=86
});
ctx.stroke（）；
log（JSON.stringify（趋势线））

我想从序列跳到公式对我来说很容易，因为我已经做了很多次了，我能给出的最好建议是练习，练习，再多练习一些：仍然不明白，但我会看看你发布的链接-谢谢。哪一部分给你带来了麻烦。。。希望不是代码，那应该是cristal Clear我已经更新了问题-我被搞混了。我真正想要的是散点图的最佳拟合/趋势线，而不是折线图。我想从序列跳到公式对我来说很容易，因为我已经做了很多次了，我能给出的最好建议是练习，练习，再练习一些：仍然不明白，但我会看一看你贴的链接-谢谢。是什么给你带来麻烦的。。。希望不是代码，那应该是cristal Clear我已经更新了问题-我被搞混了。我真正想要的是散点图的最佳拟合/趋势线，而不是折线图。Richard您的个人资料显示了RGraph的作者和创始人将价值转化为趋势线是您已经解决的问题。。。我写的是RGraph，但它只是将您赋予它的值绘制到画布（或SVG）标记上。它不会从你的数据中生成趋势线（还没有？）。例如，您可以将值[4,6,5,6,7,8,7,5,9,7,8,10]传递给它，它将为您生成一个折线图（使用折线图，这些值在画布标记上均匀分布，因此无需给出X值）。是的，RGraph会生成趋势线，见我对问题的最后补充我更新了问题-我被搞糊涂了。我真正想要的是散点图的最佳拟合/趋势线，而不是折线图。我希望你意识到，变化使它成为一个完全不同的问题。。。您应该回滚编辑并询问一个新问题。您的个人资料显示，

RGraph的作者和创始人

将值转换为趋势线是您已经解决的问题。。。我写的是RGraph，但它只是将您赋予它的值绘制到画布（或SVG）标记上。它不会从你的数据中生成趋势线（还没有？）。例如，您可以将值[4,6,5,6,7,8,7,5,9,7,8,10]传递给它，它将为您生成一个折线图（使用折线图，这些值在画布标记上均匀分布，因此无需给出X值）。是的，RGraph会生成趋势线，见我对问题的最后补充我更新了问题-我被搞糊涂了。我真正想要的是散点图的最佳拟合/趋势线，而不是折线图。我希望你意识到，变化使它成为一个完全不同的问题。。。您应该回滚该编辑并提出新问题

<canvas id="cvs" width="500" height="250">
    [No canvas support]
</canvas>

<script>
    line = new RGraph.Line({
        id: 'cvs',
        data: [4,4,3,2,5,5],
        options: {
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
            shadow: false,
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            xaxis: false,
            yaxis: false
        }
    }).draw()
</script>

[[35,71],[121,71],[207,107],[293,143],[379,35],[465,35]]