当前位置：首页 > JavaScript

Spc图 js实现

2026-02-02 22:02:32JavaScript

使用 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。以下是核心步骤：

Spc图 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');