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

Question

更新我设法将趋势线支持添加到 RGrah 折线图和散点图。下载存档中有一个名为 demos/line-trendline.html 的演示，它显示了它。散点图也支持趋势线。

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

[4,4,3,2,5,5]

如何将这些值转换为一组趋势线 values/coordinates？（顺便说一句，我真的没有任何超出学校水平的数学专业知识 - 所以请不要使用花哨的数学术语！）。

要添加更多详细信息：这些值是 spaced 在 500 像素 space（一个 HTML5 canvas 标记）上均匀分布的一组值。所以 X 坐标是为你计算出来的，结果是这样的（图表两边 35 像素边距）：[35,121,207,293,379,465].

这些只是 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>

您可以在此处在线查看图表：

https://www.rgraph.net/demos/line-csv-reader.html

而生成的 X/Y 坐标（然后绘制在 canvas 标签上）最终如下所示：

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

Answer 1

所以你已经知道：

the X coordinates are calculated for you ... (35 pixel margin): 35, 121, 207, 293, 379, 465.

生成的结果：
[[35,71], [121,71], [207,107], [293,143], [379,35], [465,35]] 这只是 [x,y] 点的列表

从中我们可以删除我们知道的 X （为我们计算） 我们将得到：
71, 71, 107, 143, 35, 35
我们可以看到原始输入的模式
4, 4, 3, 2, 5, 5

获得具有该序列的公式轻而易举：
35 + (5 - y)*36

剩下的就是将该公式放入代码中：

<canvas id="canvas"></canvas>

<script>
  canvas = document.getElementById('canvas');
  canvas.width = canvas.height = 500;
  ctx = canvas.getContext('2d');

  x = 35
  trendline = []
  plot = [4, 4, 3, 2, 5, 5]

  plot.forEach(function(value) {
    y = 35 + (5 - value) * 36
    ctx.lineTo(x, y);
    trendline.push([x, y])
    x += 86
  });

  ctx.stroke();
  console.log(JSON.stringify(trendline))
</script>

现在根据您在评论中提到的内容：

it just plots the values that you give it ... It doesn't generate trend lines from your data

查看drawLine函数上rgraph的代码：
https://www.rgraph.net/libraries/src/RGraph.line.js

        // Loop thru each value given, plotting the line
        // (FORMERLY FIRST)
        for (i=0,len=lineData.length; i<len; i+=1) {

            var data_point = lineData[i];

            //
            // Get the yPos for the given data point
            //
            var yPos = this.getYCoord(data_point);

            ...

            //
            // Add the coords to an array
            //
            this.coords.push([xPos, yPos]);
            lineCoords.push([xPos, yPos]);

对我来说，lineCoords 看起来像是一条趋势线...

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

What JavaScript code would I use to plot a trend line?

javascript

canvas

charts

line

trendline