如何将数字正确转换为折线点

时间:2018-09-20 10:37:56

标签: html5 math svg polyline

我需要在折线点中填写数据,问题是我代表每个数据集的数据不应超过120。

如果我有这些电话号码

5000 5320 5400 5100 4950 4850

我需要将它们拟合到折线点中,折线点的最大值应为120,最小值应为0。 我如何做到这一点,我考虑了如下的不同方法:

$total = "The Total Value Of All Datasets"
$row['value'] = "The Value Of The Current Dataset";

$point = ceil (($row['value'] / $total) * 1200); 

上面的示例将呈现非常接近的数字,这是不理想的,因为我需要最大的数字代表120,最低的0代表其他数字,介于两者之间。

SVG和折线的静态样本

    <svg viewBox="0 0 500 100" class="mktcap_spark">
    <polyline
        fill="none"
        stroke="#e9be3d"
        stroke-width="8"
        points="
        00,120
        20,60
        40,120
        60,10
        80,80
        100,80
        120,60
        140,100
        160,90
        180,80
        200, 110
        220, 10
        240, 70
        260, 100
        280, 100
        300, 40
        320, 0
        340, 100
        360, 100
        380, 120
        400, 60
        420, 70
        440, 80
        460, 20
        480, 50
        500, 30
        "
        />

    </svg>

渲染此

1 个答案:

答案 0 :(得分:2)

找到最小和最大值$xMin, $xMax,然后使用线性映射

$newX = 120 * ($X - $xMin) / ($xMax - $xMin)