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

tgabmvqs 于 12个月前发布在 Java

关注(0)|答案(1)|浏览(110)

更新**我设法得到趋势线支持添加到RGraph线和散点图。下载存档中有一个名为demos/line-trendline. html的演示。散点图也支持趋势线。*

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

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

如何将这些值转换为一组趋势线值/坐标？（顺便说一句，我真的没有任何数学专业知识超过学校水平-所以没有花哨的数学术语，请！）.
要添加更多详细信息，请执行以下操作：这些是一组在500像素空间（HTML5画布标记）中等距分布的值。因此，X坐标会为您计算出来，并会像这样（图表两侧的35像素边距）：[2019 - 12 - 19 01：01：05]

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

JavaScript

来源：https://stackoverflow.com/questions/59917310/what-javascript-code-would-i-use-to-plot-a-trend-line

1条答案

按热度按时间

svdrlsy41#

所以你已经知道了：
X坐标已经计算好了（35像素边距）：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>

现在从你在评论中提到的：
它只是把你给予它的值标出来。。它不会根据您的数据生成趋势线
查看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]);

我觉得这条线看起来像是趋势线...

赞(0）回复(0）举报 12个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答