从几个小时以来，我一直在寻找一种将趋势线添加到使用 Chart.js 构建的现有图表的解决方案
我认为我们只能在 Chart.js 上添加对数趋势线？
我不想从头开始绘制趋势线，而是根据这两条线的现有数据添加两条趋势线；请看这个小提琴示例：
THANK YOUhttps://jsfiddle.net/blueagency/p88mx3nw/
非常感谢您的所有帮助。
【问题讨论】：
标签： javascript charts chart.js linechart trendline
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
}
}]
【讨论】：
目前，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看到它的实际效果。
【讨论】：
通过添加一个空数据集来更新您的图表定义：
{
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 中，在 BODY SECTION 中添加这一行以包含库：
<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 或任何其他库中实现它。
这个发现让我去寻找“javascript regression.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)
【讨论】：
也许考虑使用 Google Charts，而不是 Chart.js。 Google Charts 包括趋势线 - 包括线性、指数和多项式。
此处的文档：Google Charts Trendlines
【讨论】：