Spc图 js实现
使用 JavaScript 实现 SPC 图
SPC（Statistical Process Control）图是一种用于监控过程稳定性的工具。以下是使用 JavaScript 和常见库（如 Chart.js）实现 SPC 图的步骤。
准备数据
确保数据格式正确，通常包含时间序列和对应的测量值。示例数据如下：
const data = {
labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5'],
values: [10, 12, 9, 11, 10.5],
};计算控制线
计算均值（CL）、上控制限（UCL）和下控制限（LCL）。假设使用 3σ 原则：
const mean = data.values.reduce((a, b) => a + b, 0) / data.values.length;
const stdDev = Math.sqrt(data.values.reduce((sq, n) => sq + Math.pow(n - mean, 2), 0) / data.values.length);
const ucl = mean + 3 * stdDev;
const lcl = mean - 3 * stdDev;使用 Chart.js 绘制图表
引入 Chart.js 并配置 SPC 图：
const ctx = document.getElementById('spcChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: data.labels,
datasets: [
{
label: 'Values',
data: data.values,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
},
{
label: 'UCL',
data: Array(data.values.length).fill(ucl),
borderColor: 'rgb(255, 99, 132)',
borderDash: [5, 5],
fill: false,
},
{
label: 'LCL',
data: Array(data.values.length).fill(lcl),
borderColor: 'rgb(255, 99, 132)',
borderDash: [5, 5],
fill: false,
},
{
label: 'CL',
data: Array(data.values.length).fill(mean),
borderColor: 'rgb(54, 162, 235)',
fill: false,
},
],
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: false,
},
},
},
});自定义样式和交互
根据需要调整图表样式，例如添加提示框或点击事件：
options: {
plugins: {
tooltip: {
mode: 'index',
intersect: false,
},
},
hover: {
mode: 'nearest',
intersect: true,
},
}完整 HTML 示例
将上述代码整合到 HTML 文件中：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="spcChart"></canvas>
<script>
// 此处插入上述 JavaScript 代码
</script>
</body>
</html>使用 D3.js 实现高级 SPC 图
如果需要更灵活的定制，可以使用 D3.js。以下是核心步骤：
创建 SVG 容器
const svg = d3.select('body')
.append('svg')
.attr('width', 800)
.attr('height', 400);绘制数据点和控制线
// 比例尺
const xScale = d3.scaleBand()
.domain(data.labels)
.range([0, 800]);
const yScale = d3.scaleLinear()
.domain([d3.min(data.values) - 2, d3.max(data.values) + 2])
.range([400, 0]);
// 数据点
svg.selectAll('circle')
.data(data.values)
.enter()
.append('circle')
.attr('cx', (d, i) => xScale(data.labels[i]) + xScale.bandwidth() / 2)
.attr('cy', d => yScale(d))
.attr('r', 4);
// 控制线
svg.append('line')
.attr('x1', 0)
.attr('x2', 800)
.attr('y1', yScale(ucl))
.attr('y2', yScale(ucl))
.style('stroke-dasharray', '5,5');注意事项
- 数据预处理：确保输入数据无缺失值或异常值。
- 动态更新：如需实时更新图表，监听数据变化并调用
chart.update()。 - 移动端适配：使用 CSS 确保图表在不同设备上显示正常。
