Chart.js线性回归趋势线不显示 求代码问题排查

你具备HTML、Python和SQL开发基础，刚接触Chart.js，尝试通过线性回归公式绘制趋势线，但趋势线未在网站显示，以下是代码问题的排查和修复方案：

原始代码 #

第一部分：数据处理与数据集初始化 #

var ctx = document.getElementById('myChart').getContext('2d');
var data = <?php echo $json_data; ?>;

var labels = data.map(function (item) {
return item.block3;
});
var values = data.map(function (item) {
return item.block1;
});
var sections = data.map(function (item) {
return item.Section;
});

var uniqueSections = [...new Set(sections)];

var datasets = uniqueSections.map(function(section, index) {
var sectionData = data.filter(function(item) {
return item.Section === section;
});
return {
label: section,
data: sectionData.map(function(item) {
return { x: item.block3, y: item.block1 };
}),
backgroundColor: 'rgba(' + (index * 150) + ', ' + (200 - index * 200) + ', ' + (index * 600) + ', 0.5)',
borderColor: 'rgba(' + (index * 150) + ', ' + (200 - index * 200) + ', ' + (index * 600) + ', 1)',
borderWidth: 1,
pointRadius: 7
};
});

第二部分：线性回归与趋势线绘制 #

function linearRegression(x, y) {
var n = y.length;

var sum_x = 0;
var sum_y = 0;
var sum_xy = 0;
var sum_xx = 0;
var sum_yy = 0;

for (var i = 0; i < n; i++) {
sum_x += x[i];
sum_y += y[i];
sum_xy += x[i] * y[i];
sum_xx += x[i] * x[i];
sum_yy += y[i] * y[i];
}
var slope = (n * sum_xy - sum_x * sum_y) / (n * sum_xx - sum_x * sum_x);
var intercept = (sum_y - slope * sum_x) / n;
var r_squared = Math.pow((n * sum_xy - sum_x * sum_y) / Math.sqrt((n * sum_xx - sum_x * sum_x) * (n * sum_yy - sum_y * sum_y)), 2);
return slope, intercept, r_squared;
}
var regressionData = linearRegression(labels, values);
var slope = regressionData['labels'];
var intercept = regressionData['values'];
var trendLine = labels.map(function(x) {
return (slope * x + intercept);
});
datasets.push({
label: 'Trend Line',
data: labels.map(function(x, index) {
return { x: x, y: trendLine[index] };
}),
backgroundColor: 'rgba(255, 100, 100, 0.5)',
borderColor: 'rgba(255, 100, 100, 1)',
borderWidth: 3
});
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
labels: labels,
datasets: datasets
},
options: {
scales: {
x: {
type: 'linear',
position: 'bottom'
}
}
}
});

核心问题与修复方案 #

1. 线性回归函数返回值错误 #

JavaScript中，return slope, intercept, r_squared; 使用逗号运算符，实际只会返回最后一个值r_squared，导致regressionData无法获取斜率和截距。
修复：返回一个包含所有计算结果的对象：

function linearRegression(x, y) {
var n = y.length;

var sum_x = 0;
var sum_y = 0;
var sum_xy = 0;
var sum_xx = 0;
var sum_yy = 0;

for (var i = 0; i < n; i++) {
sum_x += x[i];
sum_y += y[i];
sum_xy += x[i] * y[i];
sum_xx += x[i] * x[i];
sum_yy += y[i] * y[i];
}
var slope = (n * sum_xy - sum_x * sum_y) / (n * sum_xx - sum_x * sum_x);
var intercept = (sum_y - slope * sum_x) / n;
var r_squared = Math.pow((n * sum_xy - sum_x * sum_y) / Math.sqrt((n * sum_xx - sum_x * sum_x) * (n * sum_yy - sum_y * sum_y)), 2);
// 返回对象而非逗号分隔值
return { slope, intercept, r_squared };
}

2. 回归结果取值键名错误 #

你用regressionData['labels']和regressionData['values']获取斜率和截距，但返回的对象键名是slope和intercept，导致slope和intercept为undefined，趋势线计算全为NaN。
修复：使用正确的键名取值：

var regressionData = linearRegression(labels, values);
var slope = regressionData.slope;
var intercept = regressionData.intercept;

3. 趋势线数据集未指定类型 #

当前图表类型是scatter，新增的趋势线数据集默认会沿用该类型，以点的形式渲染。但你需要的是线，必须明确指定type: 'line'，否则只会显示一堆点，看不到连续的线。
修复：在趋势线数据集里添加type: 'line'，同时可以去掉线上的点让线条更清晰：

datasets.push({
label: 'Trend Line',
type: 'line', // 指定为折线类型
data: labels.map(function(x, index) {
return { x: x, y: trendLine[index] };
}),
backgroundColor: 'rgba(255, 100, 100, 0.5)',
borderColor: 'rgba(255, 100, 100, 1)',
borderWidth: 3,
pointRadius: 0 // 隐藏线上的点
});

4. 颜色值超出范围（可选优化） #

原始代码中颜色计算如index * 600会导致RGB值超过0-255的范围，浏览器会自动截断，可能出现异常颜色。可以调整为：

// 用取模和范围限制计算颜色
var r = (index * 85) % 255;
var g = (200 - (index * 70)) % 255;
var b = (index * 90) % 255;
// 确保颜色值非负
r = r < 0 ? 0 : r;
g = g < 0 ? 0 : g;
b = b < 0 ? 0 : b;
backgroundColor: 'rgba(' + r + ', ' + g + ', ' + b + ', 0.5)',
borderColor: 'rgba(' + r + ', ' + g + ', ' + b + ', 1)',

内容的提问来源于stack exchange，提问作者Gene Jung