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!).

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].

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

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]]

回答1:

So you already know:

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

the generated result:
[[35,71], [121,71], [207,107], [293,143], [379,35], [465,35]] that's just a list of [x,y] points

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

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

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]);

That lineCoords looks like a trendline to me...

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

标签

javascript

canvas

charts

line

trendline