我将使用什么JavaScript代码绘制趋势线? [英] What JavaScript code would I use to plot a trend line?
问题描述
假设我要在折线图上绘制以下值(这些是值而不是坐标-坐标是由我的软件计算的，如下所示):
Assuming that I have the following values that I'm going to plot on a Line chart (these are values and not coordinates - the coordinates are calculated by my software and are shown below):
[4,4,3,2,5,5]
如何将这些值转换为一组趋势线值/坐标? (顺便说一句，我真的没有超出学校水平的任何数学专业知识-所以请不要花哨的数学术语！).
How would I turn those values into a set of trendline values/coordinates? (BTW I don't really have any Maths expertise beyond school level - so no fancy Maths terminology please!).
要添加更多详细信息:这些是一组值，这些值在500像素空间(HTML5画布标签)上等距分布.因此，X坐标是为您计算的，并且会这样显示出来(图表两边的35个像素边距):[35,121,207,293,379,465].
To add further details: These are a set of values that are spaced equally across a 500 pixel space (an HTML5 canvas tag). So the X coordinates are calculated for you and will come out like this (35 pixel margin on both sides of the chart): [35,121,207,293,379,465].
这些只是X坐标，Y坐标是根据比例尺，图表高度和值自动计算的.这是我的软件使用以下代码创建的示例折线图:
These are just the X coordinates, the Y coordinates are calculated automatically based on the scale, the height of the chart and the value. Here's an example Line chart that my software creates using this code:
<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>
您可以在此处在线查看图表:
You can see the chart online here:
https://www.rgraph.net/demos/line-csv -reader.html
生成的X/Y坐标(然后绘制在canvas标记上)最终如下:
And the X/Y coordinates (that are then plotted on the canvas tag) that are generated end up as this:
[[35,71],[121,71],[207,107],[293,143],[379,35],[465,35]]
推荐答案
所以您已经知道:
为您计算X坐标...(35像素边距):35、121、207、293、379、465.
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]点的列表
the generated result:
[[35,71], [121,71], [207,107], [293,143], [379,35], [465,35]] that's just a list of [x,y] points
由此我们可以删除我们知道的X(为我们计算)，我们将得到:
71, 71, 107, 143, 35, 35
我们可以看到带有原始输入的模式
4, 4, 3, 2, 5, 5
From that we can remove the X we know (calculated for us) and we will get:
71, 71, 107, 143, 35, 35
we can see a pattern with the original input
4, 4, 3, 2, 5, 5
小菜一碟，得到具有该顺序的公式:
35 + (5 - y)*36
piece of cake to get the formula with that sequence:
35 + (5 - y)*36
剩下的就是将该公式放入代码中
All that remains is to put that formula into code:
<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>
现在从您在评论中提到的内容:
Now from what you mentioned on the comments:
它只是绘制您提供的值...它不会从您的数据中生成趋势线
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
looking at the code of rgraph on the drawLine function:
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在我看来像是一条趋势线...
That lineCoords looks like a trendline to me...
这篇关于我将使用什么JavaScript代码绘制趋势线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
