Question

从几小时开始，我一直在寻找一种解决方案，将趋势线添加到使用Chart.js构建的现有图表

我认为我们只能在Chart.js上添加对数趋势线？

我不想从头开始绘制趋势线，但根据这两条线的现有数据添加2条趋势线;请看这个小提琴示例：

THANK YOU https://jsfiddle.net/blueagency/p88mx3nw/

非常感谢您提供的所有帮助。

Answer 1

目前，chart.js根本没有趋势线功能（甚至不是对数）。也许您对Common Scale Configuration部分末尾的自定义刻度格式示例感到困惑？

然而，您可以使用chartjs-plugin-annotation插件在图表上绘制趋势线，但请记住，您必须实现自己的逻辑来计算线的正确位置（然后只需使用注释插件实际绘制它。）

这是一个演示如何使用插件的示例（该插件提供了一组annotation属性，您可以将这些属性添加到图表options。然后您只需要创建一个计算的函数趋势线并使用结果设置注释value和endValue属性。

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1],
    datasets: [{
      label: 'Dataset 1',
      borderColor: window.chartColors.blue,
      borderWidth: 2,
      fill: false,
      data: [19304,13433,9341,6931,5169, 3885,2927,2159,1853,1502, 1176,911,724,590,491, 400,335,280,239,200]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Drsw Line on Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'horizontal',
        scaleID: 'y-axis-0',
        value: 2225,
        endValue: 0,
        borderColor: 'rgb(75, 192, 192)',
        borderWidth: 4,
        label: {
          enabled: true,
          content: 'Trendline',
          yAdjust: -16,
        }
      }]
    }
  }
});

您可以在此codepen看到它的实际效果。

Answer 2

通过添加一个空数据集来更新图表定义：

    {
        label: "Trend 1",
        borderColor: 'rgba(200,0,0)',
        backgroundColor: 'rgba(200,0,0)',
        data: [],
        fill: false,
    }

在图表定义之后（在jsfiddle中），添加以下行：

arrayForRegression= []; // Declare the array which will contains calculated point of trend line
for (i=0; i < ChartVisits.data.datasets[0].data.length; i++) {
    arrayForRegression.push([i, ChartVisits.data.datasets[0].data[i]]); // Fill the array with the "y" values to be approximated by regression
}
regr = regression("polynomial", arrayForRegression, 2); // Calculare polynomial regression
convertedRegressionArray = []; // Declare an array to hold  the regression line in charts.js format
for (i=0; i < ChartVisits.data.datasets[0].data.length; i++) { // Fill the array with calculated values
    convertedRegressionArray.push(regr.points[i][1]);
}
ChartVisits.config.data.datasets[2].data = convertedRegressionArray; // Put the regression array, converted to charts format, into chart
ChartVisits.update();

在您的HTML中，在正文部分添加以下行以包含库：

<script type="text/javascript" src="js/regression.min.js"></script>

图书馆来自：

https://bl.ocks.org/daluu/5bb59ef3f3fed3de227535da367649ba

https://gist.github.com/daluu/5bb59ef3f3fed3de227535da367649ba

函数的代码被混淆/最小化，无论如何调用语法为：

var linReg = regression('linear', data);
var polyReg = regression('polynomial', data, 2);
var expoReg = regression('exponential', data);
var powReg = regression('power', data);
var logReg = regression('logarithmic', data);

数据格式：

var data = [[500,2.5], [1000,3], [1500,3], [2000,3.3], [3000,3.6], [4000,4], [5500,4.8], [6000,5], [7000,5], [8000,5.5], [9000,6], [12000,7], [14000,8], [15000,8], [18000,9], [20000,10], [21000,10], [24000,11], [28000,12], [30000,13], [50000,18]];

但是我不完全知道如何在Charts.js或任何其他库中实现它。

这个发现使我寻找“ javascriptgression.min.js”，找到了很多资源。

注意：index.html中有错误：

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

应为：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

注意2：

我认为线性回归部分存在一个主要错误：返回的等式对象（系数数组）的顺序与多项式格式相反。

示例：

3x ^ 2 + 2x + 1 作为数组[1、2、3]返回，因此每个系数必须乘以Math.pow（x，数组位置）：

y = equation[0] * Math.pow(x,0) +  equation[1] * Math.pow(x,1) + equation[1] * Math.pow(x,1)  ** correct **

2x + 1 应该以数组[1,2]的形式返回，但它以[2,1]的形式返回-> bug？

y = equation[0] * Math.pow(x,1) +  equation[1] * Math.pow(x,0)

Answer 3

chartjs-plugin-trendline提供了插入Chart.js的直线趋势线。

NPM： https://www.npmjs.com/package/chartjs-plugin-trendline/v/0.1.1

下载： https://www.jsdelivr.com/package/npm/chartjs-plugin-trendline

用法非常简单-只需将以下内容添加到数据集中：

datasets: [{
            // Other configurations
            // ...
            trendlineLinear: {
                style: "rgb(43 ,66 ,255, 0.3)",
                lineStyle: "dotted|solid",
                width: 2
            }
        }]

Answer 4

也许考虑使用Google Charts，而不是Chart.js。 Google图表包含趋势线-包括线性，指数和多项式。

此处的文档：Google Charts Trendlines

将趋势线添加到现有图表Chart.js

4 个答案: