如何将标签放在仪表JS外面

问题描述 投票:1回答:1

我有一个问题,我创建自定义仪表,但在这个仪表之外我想要显示有价值的标签。

对于仪表创建我使用:gauge.min.js

所以我想把外部规格值的数字设为%。

我的代码:

HTML:

  <canvas id="gauge"></canvas>
            <span id="gauge1-txt"></span>
            <div class="gaugeData">   
                <h1>Efficency</h1>
                <h1 id="eff"></h1>
                <input type="number" id="number" />
            </div>
            <button onclick="changeData()">test</button>

JS:

let canvas = document.getElementById('gauge');
let context = canvas.getContext('2d');
let lowerBadLimit = 50;
let loweAcceptLimit = 70;
let lowerGoodLimit = 85;
let nominalValue = 100;
let upperGoodLimit = 110;
let upperAcceptLimit = 120;
let upperBaadLimit = 150;
var globalValues = [];
var gaugeStart = 0;
var gaugeEnd = 100;
var inputValue = 150;
var poinenetValue = 0;


function drawGaugeSegment(canvas, context, x, y, beginPercent, endPercent, color) {
    let beginAngle = Math.PI + (Math.PI * (beginPercent / 100));
    let endAngle = 0 - (Math.PI * (1 - endPercent / 100));

    context.strokeStyle = color;
    context.lineWidth = 60;

    context.beginPath();
    context.arc(x, y, 170, beginAngle, endAngle);
    context.stroke();
}

function drawNeedle(canvas, context, x, y, percent, color) {
    context.fillStyle = color;
    context.translate(x, y);
    context.rotate(Math.PI * percent / 100 - Math.PI / 2);

    let needleWidth = 15;
    let needleLength = 130;

    context.beginPath();
    context.arc(0, 0, needleWidth / 2, 0, Math.PI);
    context.moveTo(0 - needleWidth / 2, 0);
    context.lineTo(0, 0 - needleLength);
    context.lineTo(needleWidth / 2, 0);
    context.lineTo(0 - needleWidth / 2, 0)
    context.fill();

}


function drawGauge(canvas, context, x, y) {
    drawGaugeSegment(canvas, context, x, y, gaugeStart, globalValues[0] - 1, '#FF6363');
    drawGaugeSegment(canvas, context, x, y, globalValues[0], globalValues[1] - 1, '#FEF567');
    drawGaugeSegment(canvas, context, x, y, globalValues[1], globalValues[2] - 1, '#70FE67');
    drawGaugeSegment(canvas, context, x, y, globalValues[2], globalValues[3] - 1, '#70FE67');
    drawGaugeSegment(canvas, context, x, y, globalValues[3], globalValues[4] - 1, '#FEF567');
    drawGaugeSegment(canvas, context, x, y, globalValues[4], gaugeEnd, '#FF6363');

    drawNeedle(canvas, context, x, y, poinenetValue, '#fff');
}

function gaugeCalc() {
    var valueRange = upperBaadLimit - lowerBadLimit;
    var gaugeRange = gaugeEnd - gaugeStart;
    var scale = gaugeRange / valueRange;
    var gaugeZone1 = (loweAcceptLimit - lowerBadLimit) * scale;
    var gaugeZone2 = (lowerGoodLimit - lowerBadLimit) * scale;
    var gaugeZone3 = (nominalValue - lowerBadLimit) * scale;
    var gaugeZone4 = (upperGoodLimit - lowerBadLimit) * scale;
    var gaugeZone5 = (upperAcceptLimit - lowerBadLimit) * scale;

    var values = [gaugeZone1, gaugeZone2, gaugeZone3, gaugeZone4, gaugeZone5];

    globalValues = values;

var convertedValue = (getValue() - lowerBadLimit) * scale;

            if (convertedValue < gaugeStart) {
                poinenetValue = gaugeStart;
                console.log(poinenetValue);
            } else if (convertedValue > gaugeEnd) {
                poinenetValue = gaugeEnd;
                console.log(poinenetValue);
            } else {
                poinenetValue = convertedValue;
                console.log(poinenetValue);

            }
        }

function getValue(val) {
            val = $('#number').val();
            return val;
        }

function changeData() {
            gaugeCalc();
            draw()
            changeEffValue()
        }

function changeEffValue() {
            document.getElementById('eff').innerHTML = getValue() + ' %';
        }


 function draw() {
            canvas.width = 550;
            canvas.height = 250;
            drawGauge(canvas, context, 260, 225);
        }


        gaugeCalc()
        draw();

一些例子,现在我有:

example

我希望像这样有价值观:

example

所以你可以看到,在我的代码中,我没有标准的可能性来添加标签。

javascript html css
1个回答
3
投票

您可以直接在画布中包含文本(请参阅MDN docs)。

例如,在drawGaugeSegment中,你已经拥有了测量仪的中心,角度,你需要的只是一些数学。

在这里我把215作为圆圈的半径来显示文本,- 6+ 3是固定的小调整,因为fillText的x / y是文本的一角,而不是中心(值可能会根据字体大小/长度而变化文本)

这给了context.fillText(endPercent, x - 6 + parseInt(Math.cos(endAngle) * 215), y + 3 + parseInt(Math.sin(endAngle) * 215));

let canvas = document.getElementById('gauge');
let context = canvas.getContext('2d');
let lowerBadLimit = 50;
let loweAcceptLimit = 70;
let lowerGoodLimit = 85;
let nominalValue = 100;
let upperGoodLimit = 110;
let upperAcceptLimit = 120;
let upperBaadLimit = 150;
var globalValues = [];
var gaugeStart = 0;
var gaugeEnd = 100;
var inputValue = 150;
var poinenetValue = 0;


function drawGaugeSegment(canvas, context, x, y, beginPercent, endPercent, color, text) {
    let beginAngle = Math.PI + (Math.PI * (beginPercent / 100));
    let endAngle = 0 - (Math.PI * (1 - endPercent / 100));

    context.strokeStyle = color;
    context.lineWidth = 60;

    context.beginPath();
    context.arc(x, y, 170, beginAngle, endAngle);
    context.stroke();
    
    context.fillText(text, x - 6 + parseInt(Math.cos(endAngle) * 215), y + 3 + parseInt(Math.sin(endAngle) * 215));
}

function drawNeedle(canvas, context, x, y, percent, color) {
    context.fillStyle = color;
    context.translate(x, y);
    context.rotate(Math.PI * percent / 100 - Math.PI / 2);

    let needleWidth = 15;
    let needleLength = 130;

    context.beginPath();
    context.arc(0, 0, needleWidth / 2, 0, Math.PI);
    context.moveTo(0 - needleWidth / 2, 0);
    context.lineTo(0, 0 - needleLength);
    context.lineTo(needleWidth / 2, 0);
    context.lineTo(0 - needleWidth / 2, 0)
    context.fill();

}


function drawGauge(canvas, context, x, y) {
    drawGaugeSegment(canvas, context, x, y, gaugeStart, globalValues[0] - 1, '#FF6363', 'test');
    drawGaugeSegment(canvas, context, x, y, globalValues[0], globalValues[1] - 1, '#FEF567', globalValues[1]);
    drawGaugeSegment(canvas, context, x, y, globalValues[1], globalValues[2] - 1, '#70FE67', globalValues[2]);
    drawGaugeSegment(canvas, context, x, y, globalValues[2], globalValues[3] - 1, '#70FE67', globalValues[3]);
    drawGaugeSegment(canvas, context, x, y, globalValues[3], globalValues[4] - 1, '#FEF567', globalValues[4]);
    drawGaugeSegment(canvas, context, x, y, globalValues[4], gaugeEnd, '#FF6363', gaugeEnd);

    drawNeedle(canvas, context, x, y, poinenetValue, '#fff');
}

function gaugeCalc() {
    var valueRange = upperBaadLimit - lowerBadLimit;
    var gaugeRange = gaugeEnd - gaugeStart;
    var scale = gaugeRange / valueRange;
    var gaugeZone1 = (loweAcceptLimit - lowerBadLimit) * scale;
    var gaugeZone2 = (lowerGoodLimit - lowerBadLimit) * scale;
    var gaugeZone3 = (nominalValue - lowerBadLimit) * scale;
    var gaugeZone4 = (upperGoodLimit - lowerBadLimit) * scale;
    var gaugeZone5 = (upperAcceptLimit - lowerBadLimit) * scale;

    var values = [gaugeZone1, gaugeZone2, gaugeZone3, gaugeZone4, gaugeZone5];

    globalValues = values;

var convertedValue = (getValue() - lowerBadLimit) * scale;

            if (convertedValue < gaugeStart) {
                poinenetValue = gaugeStart;
                console.log(poinenetValue);
            } else if (convertedValue > gaugeEnd) {
                poinenetValue = gaugeEnd;
                console.log(poinenetValue);
            } else {
                poinenetValue = convertedValue;
                console.log(poinenetValue);

            }
        }

function getValue(val) {
            val = $('#number').val();
            return val;
        }

function changeData() {
            gaugeCalc();
            draw()
            changeEffValue()
        }

function changeEffValue() {
            document.getElementById('eff').innerHTML = getValue() + ' %';
        }


 function draw() {
            canvas.width = 550;
            canvas.height = 250;
            drawGauge(canvas, context, 260, 225);
        }


        gaugeCalc()
        draw();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="gauge"></canvas>
            <span id="gauge1-txt"></span>
            <div class="gaugeData">   
                <h1>Efficency</h1>
                <h1 id="eff"></h1>
                <input type="number" id="number" />
            </div>
            <button onclick="changeData()">test</button>

编辑以自定义值,您只需添加一个text参数来显示而不是百分比

© www.soinside.com 2019 - 2024. All rights reserved.