如何在JS gauge chart中添加动态红线及额外动态数值变量

完整修改后代码 #

<!DOCTYPE html>
<html>
<head>
    <script data-require="d3@4.0.0" data-semver="4.0.0" 
            src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        .gauge {
            width: 100%;
            max-width: 250px;
            font-family: "Roboto", sans-serif;
            font-size: 32px;
            color: #004033;
        }
        .gauge__body {
            width: 100%;
            height: 0;
            padding-bottom: 50%;
            background: #d1dbda;
            position: relative;
            border-top-left-radius: 100% 200%;
            border-top-right-radius: 100% 200%;
            overflow: hidden;
        }
        .gauge__fill {
            position: absolute;
            top: 100%;
            left: 0;
            width: inherit;
            height: 100%;
            background: #235b4e;
            transform-origin: center top;
            transform: rotate(0.25turn);
            transition: transform 0.2s ease-out;
        }
        /* 新增红线样式 */
        .gauge__redLine {
            position: absolute;
            top: 100%;
            left: 50%;
            width: 3px;
            height: 100%;
            background: #ff0000;
            transform-origin: center top;
            transform: rotate(0.25turn);
            margin-left: -1.5px;
            z-index: 2;
        }
        .gauge__cover {
            width: 75%;
            height: 150%;
            background: #ffffff;
            border-radius: 50%;
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 25%;
            box-sizing: border-box;
            z-index: 3;
        }
        .chart-info1{
            float: left;
            font-size: 10px;
            margin-top: 5px;
        }
        .chart-info2{
            float: right;
            font-size: 10px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="gauge">
        <div class="gauge__body">  
            <div class="gauge__fill"></div>
            <div class="gauge__redLine"></div>
            <div class="gauge__cover"></div>
        </div>
        <span class="chart-info1">0.0</span>
        <span class="chart-info2">2.8</span>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
    <script>
        const gaugeElement = document.querySelector(".gauge");
        // 改造后的赋值函数，支持所有参数动态传入
        function setGaugeValue(gauge, minVal, maxVal, currentVal, warningVal) {
            const currentPercent = (currentVal - minVal) / (maxVal - minVal);
            const warningPercent = (warningVal - minVal) / (maxVal - minVal);
            // 边界校验
            if (currentPercent < 0 || currentPercent > 1 || warningPercent < 0 || warningPercent > 1) {
                return;
            }
            // 渲染填充进度
            gauge.querySelector(".gauge__fill").style.transform = `rotate(${currentPercent / 2}turn)`;
            // 渲染红线位置
            gauge.querySelector(".gauge__redLine").style.transform = `rotate(${warningPercent / 2}turn)`;
            // 渲染中心数值
            gauge.querySelector(".gauge__cover").textContent = currentVal.toFixed(1);
            // 渲染底部左右刻度
            gauge.querySelector(".chart-info1").textContent = minVal.toFixed(1);
            gauge.querySelector(".chart-info2").textContent = maxVal.toFixed(1);
        }
        // 示例调用，参数可替换为后端动态输出值
        setGaugeValue(gaugeElement, 0.0, 2.8, 2.2, 1.8);
    </script>
</body>
</html>

核心改动说明 #

• 补充了红线的CSS样式，层级高于填充色、低于中心遮罩，保证显示效果正常
• 重构了JS赋值函数，支持最小值、最大值、当前展示值、红线预警值四个动态参数，所有数值可自定义
• 自动完成比例计算和边界校验，无需手动换算旋转角度

Laravel 动态传值对接方法 #

1. 控制器中查询MySQL获取仪表盘相关数据，传递到视图：

// 控制器逻辑示例
public function showGauge()
{
    // 从MySQL查询对应数据，此处为示例，可替换为实际查询逻辑
    $gaugeData = [
        'min' => 0.0,
        'max' => 2.8,
        'current' => \DB::table('your_table')->value('current_value'),
        'warning_line' => \DB::table('your_table')->value('warning_value'),
    ];
    return view('your_view_path', compact('gaugeData'));
}

2. Blade视图中将后端数据赋值给JS变量，替换原硬编码的调用参数即可：

const gaugeData = @json($gaugeData);
setGaugeValue(gaugeElement, gaugeData.min, gaugeData.max, gaugeData.current, gaugeData.warning_line);

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