javascript - 在 Chartist 图表中添加线性回归/趋势线/预测？

Question

我有这个工作代码，它向我显示了一个像图表一样的散点图。现在我有2个问题。

1. 如何在 y 轴上添加一条不从零开始的真实趋势线
2. 如何添加从该趋势线产生的预测值

不幸的是， chartist似乎没有提供这样的组件，但我需要坚持代码。我有 php 生成的坐标对象/数组。所以我可以使用 php 来使用某种线性回归代码。

这是我的代码：

var data = {
  series: [{
name: 'series-1',
data: [
{x:1613488823, y:124.6521},
{x:1613650992, y:80.0000},
{x:1613653572, y:134.4538},
{x:1613677855, y:70.0000},
{x:1613686204, y:70.0000},
{x:1613738264, y:70.0000},
{x:1613746985, y:79.0000},
{x:1613769380, y:144.6281},
{x:1613812527, y:69.0000},
{x:1613903057, y:165.2810},
{x:1613942647, y:75.0000},
{x:1614106192, y:89.9900},
{x:1614148626, y:126.9675},
{x:1614297999, y:61.1670},
{x:1614430915, y:149.0851},
{x:1614699637, y:145.1738},
{x:1614718943, y:125.0308},
{x:1614795323, y:150.0000},
{x:1614904587, y:117.6946},
{x:1614965024, y:144.6281},
{x:1614965024, y:144.6281},
{x:1615107238, y:139.9500},
{x:1615228667, y:116.6440},
{x:1615306027, y:200.0000},
{x:1616081480, y:109.2017},
{x:1616834020, y:108.8657},
{x:1617022112, y:113.4454},
{x:1617027613, y:149.9500},
{x:1617196815, y:179.0000},
{x:1617376700, y:119.0000},
{x:1617538471, y:144.6281},
{x:1617704943, y:144.6281},
{x:1617731392, y:116.0000},
{x:1617748816, y:126.8908},
]
                    },
                {
                    name: 'series-2',
                    data: [{x:1613288823, y:90},{x:1617948816, y:150}]
                }
                ]
            }
            var style = {
                series: {
                    'series-1': {
                        showLine: false
                    },
                'series-2': {
                    showPoint: false,
                    showLine: true
                }
                },
                chartPadding: {
                    top: 40,
                    right: 0,
                    bottom: 30,
                    left: 0
                },
                axisX: {
                    type: Chartist.AutoScaleAxis,
                    low: 1612279223,
                    high: 1618958416,
                    showLabel: false,
                    showGrid: false,
                },
                axisY: {
                    scaleMinSpace: 40,
                    onlyInteger: true,
                    high: 240,
                    low: 0
                }
            }
            var chart = new Chartist.Line('.ct-chart', data, style);

<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet"/>
<div class="sale-chart" style="width:500px;height:300px;">
  <div class="ct-chart ct-perfect-fourth" style="width:100%;height:100%;"></div>
</div>

如您所见，我已经设法添加了带有静态值的第二层（红线）。但是如何通过数据对象给出的代码逻辑来获取这两个值（y:90 和 y:150）？

标签： javascriptlinear-regressionchartist.jstrendline