Какой код JavaScript я бы использовал для построения линии тренда? - PullRequest
Новая
       81

Какой код JavaScript я бы использовал для построения линии тренда?

1 голос
/ 26 января 2020

Предполагая, что у меня есть следующие значения, которые я собираюсь отобразить на линейном графике (это значения, а не координаты - координаты рассчитываются моим программным обеспечением и показаны ниже): 

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

Как мне превратить эти значения в набор значений / координат линии тренда? (Между прочим, я не обладаю никакими знаниями по математике за пределами школьного уровня, поэтому не пользуйтесь причудливой терминологией по математике, пожалуйста!) (тег 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 (которые затем наносятся на тэг холста) в итоге выглядят так: 

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

1 Ответ

0 голосов
/ 26 января 2020

Итак, вы уже знаете:

координаты 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>

Теперь из того, что вы упомянули в комментариях:

он просто отображает значения, которые вы ему даете ... не генерирует линии тренда из ваших данных

, глядя на код rgraph функции drawLine:
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]);

Эта линия для меня выглядит как линия тренда ...

...